了解完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缩写方式
1 div{ 2 border-image:url(/i/border.png) 30 30 stretch; 3 }
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}
以下代码是水平半径与垂直半径相等的示例：
1 div{ 2 border-radius:10px; 3 } 4 5 img{ 6 border-radius:10px 30px; 7 } 8 9 .borderradius{ 10 border-radius:10px 50px 30px; 11 } 12 13 #imgradius{ 14 border-radius:60px 40px 30px 20px; 15 }
以下是指定了不同水平半径跟垂直半径的书写方法：
1 table{ 2 border-radius:60px 40px 30px 20px / 30px 20px 10px 5px; 3 }
内容正在建设中......