第十七章 CSS边框与背景【上】
一、声明边框
属性 值 说明 CSS版本
1、border-width 长度值 设置边框的宽度（可选） 1
2、border-style 样式名称 设置边框的样式（必选） 1
3、border-color 颜色值 设置边框的颜色（可选） 1
//@charset "utf-8"
div{
width:200px;
height:200px;
border-style:solid; //边框为黑实线。
border-color:red;
border-width:10px;
}
二、边框样式
1、边框宽度取值如下
值 说明
长度值 css长度，比如px,em等
百分数 直接设置百分数：1、2、3等
thin }
medium }使用长度名称的预设宽度。这三个值的具体意义由浏览器来定义，从小到大依次增大。
thick }
2、边框的样式
值 说明
* none 没有边框
* solid 实现边框
dashed 破折线边框
dotted 圆点线边框
double 双线边框
groove 槽线边框
inset 使用元素内容具有内嵌效果的边框
outset 使用元素内容具有外凸效果的边框
ridge 脊线边框
3、如果想对四条边中某一条边单独进行设置，可以使用如下设置；
属性 说明 CSS版本
border-top-width: }
（1） border-top-style: } 定义顶端 1
border-top-color: }
border-botton-width: }
（2） border-botton-style: } 定义底部 1
border-botton-color: }
border-right-width: }
（3） border-right-style: } 定义右边 1
border-right-color: }
* 4、如果四条边都一致，那么没必要写三句样式，可以直接简写：
属性 值 说明 CSS版本
border } 设置四条边的边框 1
border-top } 只设置上边框 1
border-botton } <宽度><样式><颜色> 只设置下边框 1
border-left } 只设置左边框 1
border-right } 只设置右边框 1
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~（推荐） ~
~ 例、div{ ~
~ border：10px solid red; ~
~ } ~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
三、圆角边框
CSS3提供了一个非常实用的圆角边框的设置，使用border-radius属性，就可以达到这种效果。
属性 值 说明 CSS版本
border-radius 长度值或百分数 四条边角 3
border-top-left-radius 长度值或百分数 左上边角 3
border-top-right-radius 长度值或百分数 右上边角 3
border-botton-right-radius 长度值或百分数 右下边角 3
border-botton-right-radius 长度值或百分数 左下边角 3
例、div{
width:200px;
height:200px;
border:10px; //四个边角都为10px;
/*borde:10px 20px 30px 40px;*/ //顺序为左上，右上，右下，左下，顺时针方向旋转。
}
原文地址：https://www.cnblogs.com/keshuai752100461/p/8485180.html