边框
定义
边框(Border）属性是对HTML元素的边框进行定义的CSS属性。
概述
通过边框的样式设置，给元素增加更丰富的外观
边框的设置包含以下内容:
- 边框的类型
- 边框的尺寸
- 边框的前景背景
- 圆角边框
列表
| 元素 | 描述 | 版本 |
|---|---|---|
| border | border 属性是规定各种单独的边界属性的简写属性，可用于设置一个或多个以下属性的值：border-width，border-style，border-color。 | 1 |
| border-bottom | border-bottom 该属性是用来将下边框的所有属性：border-bottom-color, border-bottom-style 与 border-bottom-width 设置到一个声明中。 | 1 |
| border-bottom-color | border-bottom-color该属性是用于规定一个元素底部边框的颜色。 | 2 |
| border-bottom-style | border-bottom-style该属性是规定元素下边框的样式。 | 2 |
| border-bottom-width | border-bottom-width该属性是一个用于规定一个元素下边框的宽度。 | 1 |
| border-color | border-color该属性是一个用于规定元素四个边框颜色的快捷属性：border-top-color，border-right-color，border-bottom-color，border-left-color。 | 1 |
| border-left | border-left 该属性规定元素的左边框属性。 | 1 |
| border-left-color | border-left-color 该属性是一个用于规定元素的左边框的颜色。 | 2 |
| border-left-style | border-left-style 该属性是一个用于设置各种单独的边界属性的简写属性，可用于设置一个或多个以下属性的值：border-width，border-style，border-color。 | 2 |
| border-left-width | border-left-width 该属性是一个元素的左边框的宽度。 | 1 |
| border-right | border-right 该属性是元素的右边框属性。 | 1 |
| border-right-color | border-right-color 该属性是用于规定元素的右边框的颜色。 | 2 |
| border-right-style | border-right-style 该属性是用于规定元素右边框的样式。 | 2 |
| border-right-width | border-right-width 该属性是用于规定元素右边框的宽度。 | 1 |
| border-style | border-style 该属性是用作规定元素所有边框的样式。 | 1 |
| border-top | 在一个声明中设置所有的上边框属性。 | 1 |
| border-top-color | border-top 该属性表示元素的上边框属性。 | 2 |
| border-top-style | border-top-style 该属性是用于规定元素的上边框的样式。 | 2 |
| border-top-width | border-top-width 该属性是用于规定元素的上边框的宽度。 | 1 |
| border-width | border-width 该属性是用于规定元素四条边框的宽度。 | 1 |
| outline | outline 该属性是用于规定元素的轮廓属性。 | 2 |
| outline-color | outline-color 该属性是用于规定元素的轮廓的颜色。 | 2 |
| outline-style | outline-style 该属性是用于规定元素的轮廓样式属性。 | 2 |
| outline-width | outline-width 该属性是用于规定元素的轮廓的宽度。 | 2 |
| border-bottom-left-radius | border-bottom-left-radius 该属性用于规定元素的左下角边框的形状。 | 3 |
| border-bottom-right-radius | border-bottom-right-radius 该属性用于规定元素的右下角边框的形状。 | 3 |
| border-image | border-image 该属性用作给元素的边框添加背景图片。使用该属性时，会替换掉 border-style 属性所设置的边框样式。 | 3 |
| border-image-outset | border-image-outset属性规定边框图像可超出边框盒的大小。 | 3 |
| border-image-repeat | border-image-repeat 该属性用于规定图片如何填充边框。单个值，设置所有的边框；两个值，分别设置水平和垂直的边距。 | 3 |
| border-image-slice | border-image-slice 该属性用于划分边框图片在9个区域所制定的图像：4个角，4个边和中间。 | 3 |
| border-image-source | border-image-source 该属性规定<image>代替边框的样式。若此属性设置为none，使用边框样式代替。 | 3 |
| border-image-width | border-image-width 该属性用作规定图像边框宽度。若 border-image-width 大于已指定的 border-width 则将向内部扩展。 | 3 |
| border-radius | border-radius 该属性用作规定边框圆角。一个半径确定一个圆形；当使用两个半径时确定一个椭圆，该椭圆同边框的交集形成圆角效果。 | 3 |
| border-top-left-radius | border-top-left-radius 该属性是用来规定元素左上角的圆角效果。圆角可以是圆或者椭圆的一部分。若其中有一个值为0，则无圆角效果。 | 3 |
| border-top-right-radius | border-top-right-radius 该属性用于规定元素的右上角弧形。该弧形可能为一个椭圆，若一个值为0，就没有圆形。 | 3 |
| box-shadow | box-shadow 该属性是用逗号分割列表来描述一个或多个阴影效果，几乎可用到任何元素。若同时在元素上设置了border-radius，阴影依然有圆角的效果。多个阴影的 z-ordering 和多个 text-shadows 规则相同。 | 3 |
变更点
CSS3增加了圆角边框等众多特效功能.