border

一、border属性
1、实例

设置四个边框样式
p{
border:5px soild red;
}

2、属性
border-width：
（1）thin：定义细的边框
（2）medium：默认，中等边框
（3）thick：定义粗的边框
（4）length：自定义边框的宽度
（5）inherit

border-style：
（1）none
定义无边框

（2）hidden
与none相同，不过应用于表时除外，对于表，hidden用于解决边框冲突。

（3）dotted
定义点状边框。在大多数浏览器显示为实线。

（4）dashed
定义虚线。在大多数浏览器显示为实线。

（5）soild
定义实线

（6）double
定义双线，双线的宽度等于border-width的值。

（7）groove
定义3d凹槽边框，效果取决于border-color

（8）ridge
定义3d垄状边框，其效果取决于border-color

（9）inset
同上

（10）outset
同上

3、border-color
（1）color
指定背景颜色

（2）transparent
指定边框的颜色应该是透明的

3、border-collapse
（1）实例

把表格设置合并边框模型
table{
border-collapse:collapse;
}

（2）用法
该属性设置表格的边框是否被合并成一个单一的边框，还是像HTML那样分开显示。

（3）属性
1）separate
默认值，边框会被分开

2）collapse
如果可能，边框会合并成单一的边框

3）inherit

4、border-image
（1）

将图片规定为包围div元素的边框
border-image: url(...);

5、border-image-outset

div{
border-image-outset：30 30
}

该属性规定边框图像超过边框盒的量。

属性
1）length

2）number
代表对应border-width的倍数

6、border-image-source
（1）实例

使用一副图像作为围绕div元素的边框
div{
border-image-source:url(...);
}

（2）用法
border-image-source属性规定要使用的图像，代替border-style属性中设置的边框样式。

（3）属性
1）none

2）image
用作边框图像的路径

7、border-image-width
（1）实例
规定图像边框的宽度

border-image-width：30 30

（2）用法
规定图像边框的宽度

（3）属性
1）number
代表对应的border-width的倍数

2）%
参考边框图像区域的尺寸，区域高度影响水平偏移，宽度影响垂直偏移。

3）auto
如果规定该属性，则宽度为对应图像切片的固有宽度

8、border-image-repeat
（1）实例

规定如何重复图像边框
div{
border-image-source:url(...);
border-image-repeat:round;
}

（2）属性
1）stretch
拉伸图像来填充区域

2）repeat
平铺图像来填充区域

3）round
类似repeat值，如果无法平铺所有图像，则对图像进行缩放适应区域。

9、border-image-slice
（1）实例

规定图像边框向内偏移
div{
border-image-slice:50% 50%
}

10、border-radius
（1）实例

div{
border:2px soild;
border-radius;
}

（2）属性
1）length ：定义圆角形状
2）%：以百分比定义圆角形状

11、border-spacing
（1）实例

为表格设置border-spacing
table{
border-spacing：10px 50px；
}

（2）说明
该属性设置相邻单元格的边框间的距离（仅用于边框分模式）

（3）值
length length
如果定义一个参数，那么定义的是水平和垂直间距
如果定义两个length参数，那么第一个是水平间距，第二个是垂直间距