css 实现虚线效果的3种方式详解

一、效果

首先可以看一下下图显示的实现效果：

• 用三种方式实现了虚线效果： 点击查看demo代码

二、实现

1、border 属性

查看 mdn 的 border，我们知道 border 可以用于设置一个或多个以下属性的值：border-width、border-style、border-color。

border-style 可以设置边框的样式，其中 使用 dashed 设置虚线效果。

实现代码：

设置div的样式

.box {height: 100px;line-height: 100px;margin-bottom: 20px;
} 

<div className="box line1">虚线1</div> 

用 border 实现：

/*虚线1 css*/
.line1 {border: 1px dashed red;
} 

2、巧用 background 和 linear-gradient

我上篇文章《css 设置border边框颜色渐变效果》 里有详细的介绍过