CSS 边框（20160821-0021）

一、声明边框

边框的声明有三个属性设置，样式表如下：

属性值说明CSS 版本border-width长度值设置边框的宽度，可选1border-style样式名称设置边框的样式，必选1border-color颜色值设置边框的颜色，可选1这三个属性值，只有 border-style 是必须声明，才可以出现边框。而其它两个属性会出现默认值。

div{width: 150px;height: 150px;}/* 最简单的边框，边框宽度默认 3px，边框颜色为黑色 */div{/*border-style: solid;*/}/* 配置完整的边框 */div{/*border-style: solid;border-width: 2px;border-color: red;*/}

二、边框样式

边框的样式主要有三种，分别是边框长度值、边框的颜色和边框的线条类型。颜色是通用的颜色代码，和所有其他颜色取值一样。而长度和线条类型，边框有自己独到的部分。

边框宽度取值表如下：

一般来说，边框为了更加精准，还要计算元素盒子的总尺寸，使用长度值的比较多。而定义边框线条的样式表如下：

值说明none没有边框dashed破折线边框dotted圆点线边框double双线边框groove槽线边框inset使元素内容具有内嵌效果的边框outset使元素内容具有外凸效果的边框ridge脊线边框solid实线边框

/* solid 实线边框使用频率最高 */div{border-style: solid;border-width: 5px;border-color: red;}

如果想对四条边中某一条边单独进行设置，可以使用如下样式表：

值说明CSS 版本

border-top-width

border-top-style

border-top-color

定义顶端1border-bottom-width
border-bottom-style
border-bottom-color定义底部1border-left-width
border-left-style
border-left-color定义左边1border-right-width
border-right-style
border-right-color定义右边1

/* 只设置顶端 */div{border-top-style: solid;border-top-width: 5px;border-top-color: red;}

如果四条边都一致，那么没必要分写成三句样式，直接通过简写即可：

属性值说明CSS 版本border宽度、样式、颜色设置四条边的边框1border-top宽度、样式、颜色只设置上边框1border-bottom宽度、样式、颜色只设置下边框1border-left宽度、样式、颜色只设置左边框1border-right宽度、样式、颜色只设置右边框1

/* 简写，常用 */div{border:10px solid red;}

三、圆角边框

CSS 提供了一个非常实用的圆角边框的设置。使用 border-radius 属性，就可以达到这种效果，样式表：

属性值说明CSS 版本border-radius长度值或百分数四个边角3border-top-left-radius长度值或百分数左上边角3border-top-right-radius长度值或百分数右上边角3border-bottom-left-radius长度值或百分数左下边角3border-bottom-right-radius长度值或百分数右下边角3

/* 设置圆角矩形 */div{border: 5px solid red;border-radius: 10px;}

示例代码地址