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

版权声明：本文为博主原创文章，未经博主允许不得转载。 文章底部留言可联系作者。

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

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

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

实现代码：

设置div的样式

用 border 实现：

我上篇文章《css 设置border边框颜色渐变效果》 里有详细的介绍过 linear-gradient 的使用，不清楚的同学可以先学习下

先看实现代码：

我们把css拆解开慢慢看：

background 属性是一个 简写属性，可以在一次声明中定义一个或多个属性：background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size，和 background-attachment。

linear-gradient()  函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于数据类型，是一种特别的数据类型。

这段css表示的意思是：

效果如下：

设置背景图片大小为：宽度10px 高度 1px。效果变成如下：

这是为什么呢？

因为上一步我们设置 linear-gradient 属性渐变的点是百分比，所以会受到 background-size的影响，那么其实每个“灰白”的宽度就是 10px，之所以看起来高度很长，是因为 background-repeat 的原因。

并且，background 属性中 background-repeat 默认值是 repeat（背景图像将在垂直方向和水平方向重复）。所以看到的是上面的效果。如何得到虚线呢？

然后就得到了虚线：

因为上面设置的 background-size 中，高度是 1px，那么在 x（水平） 方向，就会按照 1px 进行重复。那么就得到了虚线。假如我们设置 background-size: 10px 10px，那在x 方向重复的效果如下：

这样我们实现的虚线可以根据需要来调整虚线的间距和高度。

其实思路和上面一种方式很类似

先看实现代码：

我们依然来把css拆解开慢慢看：

我为了和背景色做区分，设置了一个灰色背景，所以第一步的效果如下：

如下图所示效果：

这里设置的 linear-gradient 和 repeating-linear-gradient 相当于设置了两张背景图。后面设置的会被前面设置的覆盖。 所以设置完的效果我们看到的其实是白色：

那我们如何得到虚线呢？

还记得上面我们说道的 background-clip 嘛，其实这里就是利用了它

这两个属性的差异，正好差一个边框的特性，来实现了虚线的效果。

如果我们只要显示一个边，那么可以把div盒子的高度设置小一些，然后只设置border的一边，比如：

综上，我们通过三种方式实现了虚线边框，你学会了嘛~