CSS边框
首先清楚CSS的盒子模型(Box model)，能正确的区分边框、内边距、外边距等概念，下面用一个图来说明以上概念：
平面图：
立体图：
一、CSS边框 border
1.设置边框样式：
border-style:样式；
可选的样式有：none 无边框 dotted 虚线边框 dashed 虚线边框 solid 实线边框 double 双边框 groove 凹槽边框 ridge 垄状边框 inset 嵌入边框 outset 外凸边框 hidden 隐藏边框
border-top-style:none; 上边框样式
border-bottom-style:solid; 下边框样式
border-left-style: dashed； 左边框样式
border-right-style:double; 右边框样式
border-style:dotted solid dashed double; （上右下左边框）
2.设置边框宽度：
边框宽度不能单独设置，必须在设置了边框样式后宽度才会生效
border-width:1px; 宽度为1像素的边框
border-top-width:15px; 上边框15像素
border-bottom-width:15px; 下边框
border-left-width:15px; 左边框
border-right-width:15px; 右边框
二、CSS轮廓 outline
outline（轮廓）是绘制于元素周围的一条线，位于边框边缘外围，可以起到突出元素的作用 可以设置的属性有 颜色 样式 宽度
1、轮廓颜色
outline-color：red；
2.轮廓样式
outline-style：样式值；
样式值参考下表：
| 值 | 描述 |
|---|---|
| none | 默认。定义无轮廓。 |
| dotted | 定义点状的轮廓。 |
| dashed | 定义虚线轮廓。 |
| solid | 定义实线轮廓。 |
| double | 定义双线轮廓。双线的宽度等同于 outline-width 的值。 |
| groove | 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。 |
| ridge | 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。 |
| inset | 定义 3D 凹边轮廓。此效果取决于 outline-color 值。 |
| outset | 定义 3D 凸边轮廓。此效果取决于 outline-color 值。 |
3、轮廓宽度：
outline-width：宽度值；
可能出现的宽度值参考下表；
| 值 | 描述 |
|---|---|
| thin | 规定细轮廓。 |
| medium | 默认。规定中等的轮廓。 |
| thick | 规定粗的轮廓。 |
| length | 允许您规定轮廓粗细的值。 |
三、CSS外边距 margin
1、什么是外边距
外边距控制块级元素之间的距离，他们是透明不可见的，包括margin-top, margin-right, margin-bottom, margin-left
2.外边距的写法
（1）margin: 40px 30px 20px 10px; 上右下左
（2）margin:30px 40px 20px; 上 左右 下
（3）margin:30px 40px; 上下 左右
（4）margin:40px; 上下左右
3.可能的值
（1）length 规定具体单位记的外边距长度
（2）% 基于父元素的宽度的外边距的长度
（3）auto 浏览器计算外边距
四、CSS内边距padding
1.什么是内边距
控制块级元素内部content和border之间的距离
2、常用写法
（1）padding: 40px 30px 20px 10px; 上右下左
（2）padding:30px 40px 20px; 上 左右 下
（3）padding:30px 40px; 上下 左右
（4）padding:40px; 上下左右
3.可能取的值
（1）length 规定具体单位记的外边距长度
（2）% 基于父元素的宽度的外边距的长度
（3）auto 浏览器计算外边距
注：文章内部有借鉴同仁的经典图例，在此表示感谢，对作者的辛苦付出致以崇高敬意！