在CSS中新增了三个样式，分别是圆角边框，盒子阴影，文字阴影。

初识圆角边框：

border-radius属性用于设置元素的外边框圆角

语法如下：

border-radius:length;

原理如下：

[椭]圆与边框的交集形成圆角效果。

举例：

当length为10px时：

div{width: 100px;height: 100px;background-color:chocolate;border-radius: 10px;}

显示效果如下：

当length为40px时：

  div{width: 100px;height: 100px;background-color:chocolate;border-radius: 40px;}

由此可见，length越大，越接近圆形，length既可以是数值也可以是百分比的形式。

将正方形/矩形转变为圆形：

方法：如果是正方形，直接将length设置为高度或者宽度的一般即可，或者直接写50%，如果是矩形，设置为高度的一半即可

这里我们以将正方形转变为圆形进行举例。

举例：

显示效果如下：

length的不同设置方法：

此外length可以使用一个、两个，四个具体的数值进行替换，一个值---------代表设置上下左右四个角均为相同的圆角度，两个值-----------代表设置对角线的角采用相同的值，四个值--------------代表分别设置上下左右四个角都有各自不同的值[顺时针的顺序—左上角、右上角、右下角、左下角]。

举例：

矩形
为四个角分别设置相同的length
为主/副对角线的角设置不同的length
为四个角分别设置不同的length

显示如下：

设置单独的圆角边框：

语法如下：

border-top-left-radius: ;//设置左上角的圆角边框
border-top-right-radius: ;//设置右上角的圆角边框
border-bottom-left-radius: ;//设置左下角的圆角边框
border-bottom-right-radius: ;//设置右下角的圆角边框

但由于这种写法比较冗余，所以一般情况下并不推荐使用。

盒子阴影：

在CSS3中，我们可以使用box-shadow属性将阴影应用于盒子。

语法：

box-shadow:h-shadow v-shadow blur spread color inset;

举例：

显示如下：

h-shadow:值越大，阴影在水平轴上距离盒子越远，如果是正值，阴影位于盒子右边，如果是负值，阴影位于盒子左边。

举例：设置h-shadow为10px

显示效果如下：

举例：设置h-shadow为-10px

显示效果如下：
v-shadow：值越大，阴影在垂直轴上距离盒子越远，如果是正值，阴影位于盒子下边，如果是负值，阴影位于盒子上边

举例：设置v-shadow为20px

显示效果如下：
举例：设置v-shadow为-20px

显示效果如下：
blur:值越大，阴影部分越模糊。

设置blur的值为10px.

显示如下：

设置blur的值为1px,显示如下：

spread：值越大，阴影的尺寸越大。

将spread的值设置为20px,显示如下：

将spread的值设置为1px,显示如下：

color:用来设置阴影的颜色，虽然颜色是自定义的，但是，我们一般都用较模糊的黑色来作为阴影的颜色。

举例：

将颜色设置为rgb(0，0， 0， .3),显示如下：

inset：将阴影设置为内部阴影，只需要在box-shadow的属性值后面添加inset即可实现。

显示效果如下：

注：默认的是外部阴影(outset),但是不可以写这个单词，否则会导致阴影无法正确显示。

虽然盒子模型在网页上显示一定的效果，但是它并不占用空间，带有阴影效果的盒子的相邻盒子之间并不会相隔阴影尺寸的大小，而是紧挨着它

举例：

显示如下：

文字阴影：

在CSS3中，我们可以使用text-shadow属性将阴影应用于文本。

语法：

text-shadow：h-shadow v-shadow blur color;

与盒子阴影基本相同，只是在参数个数上比盒子阴影少了两个。

举例：

我是美女

显示如下：