在浏览网站时，我们会发现页面的内容都是按区域划分的。在页面中，每一块区域分别承载不同的内容，这些承载内容的区域就被称为盒子模型。盒子模型就是把HTML页面中的元素看作是一个方形的盒子，也就是一个盛装内容的容器。每个方形的盒子都由元素的内容、边框、内边距和外边距组成。
边框属性
为了分割页面中不同的盒子，常常需要给元素设置边框效果。在CSS中边框属性包括边框样式属性(border-style)、边框宽度属性(border-width)、边框颜色属性(border-color)、单侧边框属性、边框的综合属性。
| 设置内容 | 样式属性 | 常用属性值 |
|---|---|---|
| 上边框 | border-top-style：样式； border-top-width：宽度；border-top-color：颜色；border-top：宽度 样式 颜色 | |
| 下边框 | border-bottom-style：样式； border-bottom-width：宽度；border-bottom-color：颜色；border-bottom：宽度 样式 颜色 | |
| 左边框 | border-left-style：样式； border-left-width：宽度；border-left-color：颜色；border-left：宽度 样式 颜色 | |
| 右边框 | border-right-style：样式； border-right-width：宽度；border-right-color：颜色；border-right：宽度 样式 颜色 | |
| 样式综合设置 | border-style：上边 [右边 下边 左边]； | none 无（默认）、solid（单实线）、dash（虚线）、dotted（点线）、double（双实线） |
| 宽度综合设置 | border-width：上边 [右边 下边 左边]； | 像素值 |
| 颜色综合设置 | border-color：上边 [右边 下边 左边]； | 颜色值、#十六进制、rgb（r，g，b）、rgb（r%，g%，b%） |
| 边框综合设置 | border：四边宽度 四边样式 四边颜色 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框样式</title>
<style>
div {
width: 200px;
height: 200px;
margin: 10px;
}
/* 上边框属性 */
div {
border-top-style: solid;
border-top-width: 10px;
border-top-color: pink;
/* 上边框综合设置 */
/* border-top: 1opx solid pink */
}
/* 右边框属性 */
div {
border-right-style: dashed;
border-right-width: 10px;
border-right-color: red;
/* 右边框综合设置 */
/* border-right: 1opx solid pink */
}
/* 下边框属性 */
div {
border-bottom-style: dotted;
border-bottom-width: 10px;
border-bottom-color: blue;
/* 下边框综合设置 */
/* border-bottom: 1opx solid pink */
}
/* 左边框属性 */
div {
border-left-style: double;
border-left-width: 10px;
border-left-color: green;
/* 左边框综合设置 */
/* border-bottom: 1opx solid pink */
}
/* 样式综合设置、宽度综合设置、颜色综合设置 */
#two {
border-style: solid dotted;
border-width: 10px 10px 10px;
border-color: pink;
}
/* 边框综合设置 */
#three {
border: 10px solid red;
}
</style>
</head>
<body>
<div id="one">
盒子模型的边框属性
</div>
<div id="two">
盒子模型2的边框属性
</div>
<div id="three">
盒子模型3的边框属性
</div>
</body>
</html>
在综合设置边框样式时，其属性值可以设置1~4个。当设置4个属性值时，边框样式的写法会按照上右下左的顺时针顺序排列。当省略某个属性值时，边框样式会采用值复制的原则，将省略的属性值默认为某一边的样式。设置3个属性值时，为上、左右、下；设置2个属性值时，为上下、左右，设置一个属性值时，为4边的公用样式。
版权声明：本文为weixin_48055520原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。