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内边界以内的区域的尺寸计算。

原理图如下：

举例：

 border-radius: 4px 3px 6px / 2px 4px;

 /* 等价于 */

 border-top-left-radius:     4px 2px;
 border-top-right-radius:    3px 4px;
 border-bottom-right-radius: 6px 2px;
 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张图片），原理如下图：

不指定fill时，第9部分被丢弃，指定fill时，保留第9部分，填充到元素的padding+width区域。

第1、2、3、4部分应用到边框对应的4个角；第5、6、7、8部分根据后续边框属性的值应用到对用位置的边框上。

border-image-width

border-image-width用来代替之前指定的border的宽度。如果不指定，（默认为auto）则还用border之前指定的宽度。

该属性可以用具体像素数、数字（表示倍数）和百分数指定。当为百分数时，根据元素border+padding+width或height计算。

最多指定4个值，最少1个值，分别表示上右下左位置的边框的宽度。

如果指定的值大于之前指定的border的宽度，则图片将会向元素的padding和width区域延伸。

如果指定的值太大，导致相对的图片要相互重叠，浏览器会对图片进行缩放阻止他们重叠，缩放规则如下：

border-image-outset

border-image-outset用于指定边框图像延伸到border外边界以外的距离。可以指定1~4个值，像素数或数字（表示倍数）。

border-image-repeat

border-image-repeat作用是是否边框图像的5、6、7、8部分是否重复填充对应的边框区域。可取以下几个值中的一个：

stretch  仅仅拉伸图片到适当尺寸以填充边框的对应区域，不重复。

repeat   在不缩放图片的前提下，重复图片以填充对应区域，当填充到最后，余下的空间不足以容纳整张（整部分）图片时，会将图片超出的部分裁掉以填充余下空间。

round    会对图片进行缩放以使刚好有整数个重复填充对应部分。

space    不缩放图片以进行重复填充。当填充到最后，余下的空间不足以容纳整张（整部分）图片时，会将这余下的空间均分到之前重复部分的两侧。

参考文章：

1、CSS 3规范

2、CSS3 border-image详解、应用及jQuery插件

3、css3：border-image边框图像详解