这是我参与更文挑战的第 6 天，活动详情查看： 更文挑战
HTML 中如 <div></div> <span></span> <p></p> 等元素在网页上都是以一个方形盒子呈现，每个元素都叫做一个盒子，我们可以给这些盒子设置宽、高、内边距、外边距等参数来调整它们的表现样式。
每个盒子都有外边距（ margin ）、边框（ border ）、内边距（ paddding ）、内容（ content ） 4 部分组成，它们层层包裹，如图：
1 边框（border）属性
border 具体样式属性
| 属性名 | 属性值 | 描述 | 实例 |
|---|---|---|---|
border-width | 正数px | 设置边框宽度 | border-width: 1px; |
border-style | 见属性值详解 | 设置边框样式 | border-style: solid; |
border-color | 16 进制、RGB、RGBA颜色形式， | 设置边框颜色 | border-color: #666666; |
border | width style color | 同时设置边框的宽度，样式，颜色 | border: 1px solid #666666; |
border-style 属性值
border-style 属性值 | 描述 | 实例 |
|---|---|---|
none | 默认值，不设置边框的宽度 | border-style: none; |
solid | 设置边框为单实线 | border-style: solid; |
dashed | 设置边框为虚线 | border-style: dashed; |
dotted | 设置边框为点线 | border-style: dotted; |
double | 设置边框为双实线 | border-style: double; |
boder 方位属性
| 属性名 | 属性值 | 描述 | 实例 |
|---|---|---|---|
border-top | width style color | 设置上边框的宽度，样式，颜色 | border-top: 1px solid #666666; |
border-right | width style color | 设置右边框的宽度，样式，颜色 | border-right: 1px solid #666666; |
border-bottom | width style color | 设置下边框的宽度，样式，颜色 | border-bottom: 1px solid #666666; |
border-left | width style color | 设置左边框的宽度，样式，颜色 | border-left: 1px solid #666666; |
border具体样式属性和 border 方位属性可以排列组合成 12 种设置边框的属性，分别为：
border-top-width border-top-style border-top-color border-right-width border-right-style border-right-color border-bottom-width border-bottom-style border-bottom-color border-left-width border-left-style border-left-color 。
2 表格的边框合并
表格的 HTML 代码为 <table><tr><td></td></tr></table> 结构，如果给 <table> 标签设置 border: 1px; 属性，则里边的每个<td></td> 单元格也会有 border: 1px; 属性，就会表现为边框为 2 像素，可以使用 border-collapse: collapse; 属性将 <table> 和 <td> 的边框合并，表现为整个表格边框为 1 像素。
3 圆角边框（ CSS3 ）
在 CSS2 时，只能设置每个盒子为方形，在 CSS3 中引入了 border-radius 属性来设置盒子的圆角边框。
border-radius 属性值 | 描述 | 实例 |
|---|---|---|
10px | 当属性值为 1 个参数时，设置该盒子的四个角都为 10 像素的圆角半径 | border-radius: 10px; |
10px 20px | 当属性值为 2 个参数时，设置该盒子的左上和右下为 10 像素的圆角半径，右上和左下为 20 像素的圆角半径 | border-radius: 10px 20px; |
10px 20px 30px | 当属性值为 3 个参数时，设置该盒子的左上为 10 像素的圆角半径，右上和左下为 20 像素的圆角半径，右下为 30 像素的圆角半径 | border-radius: 10px 20px 30px; |
10px 20px 30px 40px | 当属性值为 4 个参数时，设置该盒子的左上为 10 像素的圆角半径，右上为 20 像素的圆角半径，右下为 30 像素的圆角半径，左下为 40 像素的圆角半径 | border-radius: 10px 20px 30px 40px; |
50% | 当属性值为 50% 时，设置该盒子的四个圆角半径为半圆，表现为该盒子为圆形。也可以设置 1 到 4 个百分号形式的属性值参数来分别设置盒子的四个角的圆角半径 | border-radius: 50%; |
盒子模型系列的其他文章：（ updating ）
各位大佬，如果感觉本文章还不错的话，可否点个赞 (・ε・●)
如有错误之处, 恳请留言, 定会及时改正
