CSS3学习笔记(3)-CSS3边框

了解完CSS的盒子模型之后，接下来学习的是边框格式设置部分的内容。关于边框，我们可以设置的包括：边框粗细(border-width)、边框颜色(border-color)、边框类型(border-style)、图片边框(border-image)、圆角边框(border-radius)。边框类型以下我只列出一个可用列表，需要重点注意的是图片边框与圆角边框两项设置。

border-style：边框类型

属性值	描述	示例
none	定义无边框
hidden	功能与none相同。只是在应用于表格时存在差异，使用hidden可以解决表中边框的冲突
dotted	点状边框	1px dotted
dashed	虚线边框	1px dashed
solid	实线边框	1px solid
double	双线，双线的宽度等于 border-width 的值。	3px double
groove	3D 凹槽边框，效果取决于 border-color 的值，且border-width不能过小，否则看不到效果。	8px groove #ff0
ridge	3D 垄状边框，效果取决于 border-color 的值，且border-width不能过小，否则看不到效果。	8px ridge #0ff
inset	3D inset 边框,其效果取决于 border-color 的值，且border-width不能过小，否则看不到效果。	8px inset #f0f
outset	3D outset 边框,其效果取决于 border-color 的值，且border-width不能过小，否则看不到效果。	8px outset #f00
inherit	从父元素继承边框样式。

border-image：图片边框

图片边框border-image是缩写形式，可以使用该属性以单一行指定图片边框格式。其下还可以设置4个分属性，在指定图片边框格式时，也可以单个的分属性进行设置。

子项	描述	示例
border-image-source	用在边框的图片的路径。	border-image:url(/i/border.png);
border-image-slice	图片边框向内偏移，通过该参数可以实现图片的裁切。
border-image-width	图片边框的宽度。
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

border-image缩写方式

div{
    border-image:url(/i/border.png) 30 30 stretch;
}

border-image-slice:<number>|<percentage>{1,4}

以上语法格式的意思是：参数可以接受数值<number>及百分比值<percentage>，值可以指定1到4个{1,4}。其参数值的个数所对应的意义请参见之前的博文CSS3学习笔记(2)-CSS盒子模型中TRBL原则的说明；要理解border-image-slice如何设置存在一定的难度，这里我以实际案例来说明设置方式。假若我们有一张300px×240px的图片，我们来看看设置4个参数的意义。

border-image-slice:60px 90px 36px 60px;

以上代码的意思是：对图片切下4刀：第一刀水平切，距离顶部60px(即为T)；第二刀竖直切，距离右侧90px(即为R)；第三刀水平切，距离底部36px(即为B)；第4刀竖直切，距离左侧60px(即为L)；我们也可以使用百分比来设置，等价于以下代码：

border-image-slice:25% 30% 15% 20%

以上代码的意思是：对图片切下4刀：第一刀水平切，距离顶部25%(即为T)；第二刀竖直切，距离右侧30%(即为R)；第三刀水平切，距离底部15%(即为B)；第4刀竖直切，距离左侧20%(即为L)；

注：切割完毕之后，我们会得到9张小图片，但是实际真真有效的用于设置边框的图片只有4张，分别是TRBL各个方位的中间位置那张图片。

border-image-repeat:stretch|repeat|round {1,2}

当将图片切割完毕后，还需要提供一个图片填充方式，以上border-image-repeat参数格式的意思是：参数值的范围只能是stretch、repeat、round其中之一，且指定时，可以设置单个值，或指定2个值。单个值表示水平与垂直的填充模式一样，指定2个值时，前面一个表示水平填充模式，后面一个表示垂直填充模式。三个参数取值的意义如下所示：

参数值	描述	示例
stretch	拉伸所在切割小图片，以适应当前位置的边框大小。
repeat	从所在对应边框位置的中间向两端，将小图片重复平铺到边框，小图片大小不变动。
round	与repeat类似进行平铺，但是会调整小图片大小以行程刚好填充到对应边框位置。

border-radius：圆角边框

所有的元素都可以设置边框，CSS3还可以设置圆角边框：即可以指定元素矩形框的4个角落为圆角。每一个圆角可以指定2个半径，一个是水平方向的，一个是垂直方向的，我们可以想象一个椭圆，椭圆有水平半径以及垂直半径，我们的圆角边框就是将其水平及垂直切割后，取这个椭圆的1/4边线。以下是圆角边框参数指定的语法格式：

border-radius:{1,4}/{1,4}

以下代码是水平半径与垂直半径相等的示例：

div{
    border-radius:10px;
}

img{
    border-radius:10px 30px;
}

.borderradius{
    border-radius:10px 50px 30px;
}

#imgradius{
    border-radius:60px 40px 30px 20px;
}

以下是指定了不同水平半径跟垂直半径的书写方法：

table{
    border-radius:60px 40px 30px 20px / 30px 20px 10px 5px;
}

内容正在建设中......