CSS实现实线效果的样式设置

有很多种，其中最常用的有两种：border-style属性和outline属性。

1、使用border-style属性

border-style属性可以控制边框的样式，它有以下几种值：

none：表示无边框，也就是不显示边框

dotted：表示点状边框，也就是由点组成的虚线

dashed：表示虚线边框，也就是由实线和空白组成的虚线

solid：表示实线边框，也就是实线

double：表示双线边框，也就是两条实线，中间有一定的空隙

groove：表示凹槽边框，也就是由浅色和深色线条组成的虚线，实线和虚线交替出现

ridge：表示凸起边框，也就是由深色和浅色线条组成的虚线，实线和虚线交替出现

inset：表示凹陷边框，也就是由深色和浅色线条组成的虚线，实线和虚线交替出现

outset：表示凸起边框，也就是由浅色和深色线条组成的虚线，实线和虚线交替出现

要实现实线效果，只需要将border-style的属性值设置为solid即可，例如：

.box {
	border-style: solid;
}

2、使用outline属性

outline属性可以控制轮廓（outline）的样式，它的属性值和border-style的属性值是一样的，也就是可以设置为none、dotted、dashed、solid、double、groove、ridge、inset和outset，要实现实线效果，只需要将outline的属性值设置为solid即可，例如：

.box {
	outline: solid;
}

以上两种方法都可以实现实线效果，但是outline属性更常用，因为它不会占据额外的布局空间，而border-style属性会占据额外的布局空间。

千锋教育是高品质web前端培训机构，千锋教育拥有大量实力web前端培训讲师，提供优质的web培训课程，web前端培训，欢迎报名千锋教育。