CSS 3学习——边框

在CSS 3中可以设置边框圆角、边框阴影和边框图像，分别通过border-radius、border-image和box-shadow属性设置。

边框圆角

border-radius属性是以下4个属性的简写：

border-top-left-radius 设置左上角的圆角

border-top-right-radius 设置右上角的圆角

border-bottom-right-radius 设置右下角的圆角

border-bottom-left-radius 设置左下角的圆角

以上每个属性可以设置最多两个值，第一个值是水平轴的长度，第二个值是垂直轴的长度。如果设置一个值，则第二个值等于第一个值，即一个正圆；如果设置设置两个不相等的值，则是一个椭圆。

如果指定值为百分数，则相对于元素的border内边界以内的区域的尺寸计算。

原理图如下：

举例：

1 border-radius: 4px 3px 6px / 2px 4px;
2 
3 /* 等价于 */
4 
5 border-top-left-radius:     4px 2px;
6 border-top-right-radius:    3px 4px;
7 border-bottom-right-radius: 6px 2px;
8 border-bottom-left-radius:  3px 4px;

边框阴影

边框阴影通过box-shadow属性设置。

box-shadow的取值：inset offset-x offset-y blur-radius spread-radius color;

这是一组完整的取值，每个值之间用空格隔开。一组值代表一个阴影，可以设置多个阴影，也就是可以设置多组值，每组值之间用逗号隔开。

inset 表示阴影在元素的border内。默认情况不用设置inset，表示阴影在border外。阴影在元素的border内，不是说原来在border右外边界外的阴影会出现在border右内边界以内，而是出现在border的左内边界以内。

offset-x、offset-y设置阴影的偏移量。

offset-x设置阴影的水平偏移量，正值，阴影在border右外边界外；负值，阴影在border左外边界外。

offset-y设置阴影的垂直偏移量，正值，阴影在border下外边界外；负值，阴影在border上外边界外。

blur-radius 默认为0，此时阴影边缘锐利。值越大，阴影随之变大变淡，边缘也越模糊。不能指定为负值。这个值是分别在阴影的上下左右额外增加指定值一半的模糊距离。

spread-radius 默认为0，此时阴影的尺寸与元素的border+padding+width或height的尺寸一样大。指定为正值，阴影以阴影自身的中心点扩大指定的值；指定为负值，阴影以阴影自身的中心点收缩指定的值。

color 指定阴影的颜色。

边框图像

使用border-image之前一定要现制定边框的样式 border-style，本质上主要是要先指定border的宽度。

使用border-image之后，其将会替换掉之前设置的边框样式。

border-image是以下5个属性的简写。

border-image-source

border-image-slice

border-image-width

border-image-outset

border-image-repeat

border-image-source

border-image-source的值可取none或图片的地址。为none时，边框应用为border-style的样式。图片地址通过url()引用。

border-image-slice的原理

border-image-slice的值最多可以指定5个。前4个值为数字或百分数，为数字时单位为像素（不要带单位），为百分数时根据引用图片的尺寸计算。4个数值如果只指定一个，则其余三个也等于指定值；如果指定两个，则第三个等于第一个的值，第四个等于第二个的值；指定三个，则第四个也等于第二个的值。第五个值要么不指定要么只能指定为fill。

border-image-slice的四个数值产生4条分割线将引用的原始图片分割为9个部分（本质上是分割成了9张图片），原理如下图：