1. 前言
边框是使用频率很高的样式，图片可以加边框，表格基本都是带边框的，所以边框的学习是很重要的。
本篇就来介绍下CSS边框的用法。
2. 边框的样式
可以通过border-style设置边框样式，常用的有solid实线、dotted点线、dashed虚线三种。
<p class="border-solid"> 演示实线边框 </p> <p class="border-dotted"> 演示点线边框 </p> <p class="border-dashed"> 演示虚线边框 </p>
CSS代码：
.border-solid { border-style: solid; } .border-dotted { border-style: dotted; } .border-dashed { border-style: dashed; }
效果如下：
3. 边框宽度
可以通过border-width调整边框的宽度，单位一般使用px像素。
<p class="border-thick"> 演示粗边框 </p> <p class="border-thin"> 演示细边框 </p> CSS代码，当日具体的宽度，可以根据实际情况调整，我此处仅仅为了演示。 .border-thick { border-style: solid; border-width: 4px; } .border-thin { border-style: solid; border-width: 1px; }
4. 边框颜色
可以使用bolder-color指定边框的颜色，HTML代码：
<p class="border-red"> 演示红色边框 </p> <p class="border-green"> 演示绿色边框 </p> CSS代码： .border-red { border-style: solid; border-color: red; } .border-green { border-style: solid; border-color: green; }
5. 简写属性
大家想必发现了，我们在设定边框样式时，一般都会同时设定边框样式、宽度、颜色，如果逐一定义，比较麻烦。
所以CSS还提供了简写属性：
<p class="border-simple"> 使用简写属性 </p> CSS代码： /* 使用简写属性，边框样式为实线、宽度1px、颜色蓝色 */ .border-simple { border: solid 1px blue; }
一般情况下，边框都是使用简写属性来编写，因为这样写比较简单。
6. 单独设定各边样式
还支持单独设定上边框、下边框、左边框、右边框的样式：
<p class="border-each">
单独设定各边框样式
</p>
1
2
3
CSS代码：
.border-each {
border-top: solid 1px blue;
border-bottom: solid 1px green;
border-left: dashed 1px grey;
border-right: dashed 1px grey;
}
7. 小结
边框一般掌握简写方法就够了。
