《二》CSS3边框

border-radius：

border-radius 属性为元素添加圆角边框。数值越小，弧度越小。

语法：

1. border-radius: none;
2. border-radius: m;：一个数值代表四个角的 x 轴，y 轴方向半径都一样。
3. border-radius: m m;：两个数值分别代表左上/右上，左下/右下的 x 轴，y 轴方向的半径。
4. border-radius: m m m;：三个数值代表左上，右下/右上，左下的 x 轴，y 轴方向的半径。
5. border-radius: m m m m;：四个数值分别代表左上，右上，右下，左下的 x 轴，y 轴方向的半径。
6. border-radius: x x x x/y y y y;：前四个数值代表左上，右上，右下，左下的 x 轴方向的半径，后四个数值代表左上，右上，右下，左下的 y 轴方向的半径。

border-image:

border-image 属性用于为元素添加边框背景。语法：border-image:source slice width outset repeat;

属性值：

1. source：定义边框的背景图片源，即图像的 URL。
2. slice：定义如何裁切背景图像。默认像素数，也可以用百分比。
3. width:：定义边框背景图像的显示大小，及边框显示大小。
4. outset：定义边框背景图像的偏移位置。目前所有浏览器都不支持。
5. repeat：定义边框背景图像的重复性。属性值有 repeated(重复)、stretched(拉伸)、rounded(铺满)。

border-image:url(“ “) 30 15px round;//30的单位默认是px，代表上右下左分别向对应方向的30px处划一条线，将图片划分成9个部分，每个部分对应添加到元素中去。

box-shadow:

box-shadow 属性为元素添加盒阴影。语法：box-shadow:h-shadow v-shadow blur spread color inset;。

box-shadow 属性值可以用逗号隔开多个，表示携带多个阴影。

属性值：

1. h-shadow：必选。阴影的 x 轴偏移距离。为像素数，允许负值。

2. v-shadow：必选。阴影的 y 轴偏移距离。为像素数，允许负值。

   h-shadow 和 v-shadow 都为正值时，阴影在右下角。
   h-shadow 和 v-shadow 都为负值时，阴影在左上角。
   h-shadow 为正值，v-shadow 为负值时，阴影在右上角。
   h-shadow 为负值，v-shadow 为正值时，阴影在左下角。

3. blur：可选。模糊的程度。为像素数，只能为正值，值越大，边缘越模糊。值为 0 时表示不具有模糊效果。

4. spread：可选。阴影的大小。为像素数，允许负值。正值时阴影延展扩大，负值时阴影会缩小。

5. color：可选。阴影的颜色。

6. inset：可选。从外层阴影改变为内层阴影。

box-shadow: 10px 10px 5px 5px red inset;

drop-shadow：

面对不规则的图形，可以通过 CSS3 中 filter 滤镜中的阴影滤镜： filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值) 来设置阴影。

box-shadow：只是盒阴影，即盒子的阴影。
drop-shadow：就符合真实世界的投影。透明部分，光线穿过，没有投影；非透明部分，光线穿过，有投影。

filter: drop-shadow(0 0 2px red);