CSS边框

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    浏览器计算外边距

注：文章内部有借鉴同仁的经典图例，在此表示感谢，对作者的辛苦付出致以崇高敬意！