带圆角的虚线边框？CSS 不在话下

2023-12-13 10:32 由 ChokCoco 发表于 #前端开发

今天，我们来看这么一个非常常见的切图场景，我们需要一个带圆角的虚线边框，像是这样：

这个我们使用 CSS 还是可以轻松解决的，代码也很简单，核心代码：

div {
    border-radius: 25px;
    border: 2px dashed #aaa;
}

但是，原生的 dashed 有一个问题，就是我们无法控制虚线的单段长度与间隙。

假设，我们要这么一个效果呢虚线效果呢：

此时，由于无法控制 border: 2px dashed #aaa 产生的虚线的单段长度与线段之间的间隙，border 方案就不再适用了。

那么，在 CSS 中，我们还有其它方式能够实现带圆角，且虚线的单段长度与线段之间间隙可控的方式吗？

本文，我们就一起探讨探讨。

实现不带圆角的虚线效果

上面的场景，使用 CSS 实现起来比较麻烦的地方在于，图形有一个 border-radius。

如果不带圆角，我们可以使用渐变，很容易的模拟虚线效果。

我们可以使用线性渐变，轻松的模拟虚线的效果：

div {
    width: 150px;
    height: 100px;
    background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x;
    background-size: 4px 1px;
    background-position: 0 0;
}

看看，使用渐变模拟的虚线如下：

解释一下上面的代码：

linear-gradient(90deg, #333 50%, transparent 0)，实现一段渐变内容，100% - 50% 的内容是 #333 颜色，剩下的一半 50% - 0 的颜色是透明色 transprent
repeat-x 表示只在 x 方向重复
background-size: 4px 1px 表示上述渐变内容的长宽分别是 4px\ 1px，这样配合 repeat-x就能实现只有 X 方向的重复
最后的 background-position: 0 0 控制渐变的定位

因此，我们只需要修改 background 的参数，就可以得到各种不一样的虚线效果：

完整的代码，你可以戳这里：CodePen Demo -- Linear-gradient Dashed Effect

并且，渐变是支持多重渐变的，因此，我们把容器的 4 个边都用渐变表示即可：

div {
    background: 
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
    background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
}

效果如下：

但是，如果要求的元素带 border-radius 圆角，这个方法就不好使了，整个效果就会穿帮。

因此，在有圆角的情况下，我们就需要另辟蹊径。

利用渐变实现带圆角的虚线效果

当然，本质上我们还是需要借助渐变效果，只是，我们需要转换一下思路。

譬如，我们可以使用角向渐变。

假设，我们有这么一个带圆角的元素：

<div></div>

div {
    width: 300px;
    height: 200px;
    background: #eee;
    border-radius: 20px;
}

效果如下：

如果我们修改内部的 background: #eee，把它替换成重复角向渐变的这么一个图形：

div {
    //...
-  background: #eee;
+  background: repeating-conic-gradient(#000, #000 3deg, transparent 3deg, transparent 6deg);
}

解释一下，这段代码创建了一个重复的角向渐变背景，从黑色（#000）开始，每 3deg 变为透明，然后再从透明到黑色，以此循环重复。

此时，这样的背景效果可用于创建一种渐变黑色到透明的重复纹理效果：

在这个基础上，我们只需要给这个图形上层，再利用伪元素，叠加一层颜色，就得到了我们想要的边框效果，并且，边框间隙和大小可以简单调整。

完整的代码：

div {
    position: relative;
    width: 300px;
    height: 200px;
    border-radius: 20px;
    background: repeating-conic-gradient(#000, #000 3deg, transparent 3deg, transparent 6deg);
    
    &::before {
        content: "";
        position: absolute;
        inset: 1px;
        background: #eee;
        border-radius: 20px;
    }
}

效果如下：

乍一看，效果还不错。但是如果仔细观察，会发现有一个致命问题：虚线线段的每一截长度不一致。

只有当图形的高宽一致时，线段长度才会一致。高宽比越远离 1，差异则越大：

完整的代码，你可以戳这里：CodePen Demo -- BorderRadius Dashed Border

那有没有办法让虚线长度能够保持一样呢？

可以！我们再换一种渐变，我们改造一下底下的角向渐变，重新利用重复线性渐变：

div {
  border-radius: 20px;
  background: 
    repeating-linear-gradient(
      -45deg,
      #000 0,
      #000 7px,
      transparent 7px,
      transparent 10px
    );
}

此时，我们能得到这样一个斜 45° 的重复线性渐变图形：

与上面方法一类似，再通过在这个图形的基础上，在元素中心，叠加多一层纯色遮罩图形，只漏出最外围一圈的图形，带圆角的虚线边框就实现了：

此方法比上面第一种渐变方法更好之处在于，虚线每一条线段的长度是固定的！是不是非常的巧妙？

完整的代码，你可以戳这里：CodePen Demo -- BorderRadius Dashed Border

最佳解决方案：SVG

当然，上面使用 CSS 实现带圆角的虚线边框，还是需要一定的 CSS 功底。

并且，不管是哪个方法，都存在一定的瑕疵。譬如如果希望边框中间不是背景色，而是镂空的，上述两种 CSS 方式都将不再使用。

因此，对于带圆角的虚线边框场景，最佳方式一定是 SVG。（切图也算是吧，但是灵活度太低）

只是很多人看到 SVG 会天然的感到抗拒，或者认为 SVG 不太好掌握。

所以，本文再介绍一个非常有用的开源工具 -- Customize your CSS Border：

通过这个开源工具，我们可以快速生成我们想要的虚线边框效果，并且一键复制可以嵌入到 CSS background 中的 SVG 代码图片格式。

图形的大小、边框的粗细、虚线的线宽与间距，圆角大小统统是可以可视化调整的。

通过一个动图，简单感受一下：

总结一下

本文介绍了 2 种在 CSS 中，不借助切图和 SVG 实现带圆角的虚线边框的方式：

重复角向渐变叠加遮罩层
重复线性渐变叠加遮罩层

当然，两种 CSS 方式都存在一定瑕疵，但是对于一些简单场景是能够 Cover 住的。

最后，介绍了借助 SVG 工具 Customize your CSS Border 快速生成带圆角的虚线边框的方式。将 SVG 生成的矢量图像数据直接嵌入到 background URL 中，能够应付几乎所有场景，相对而言是更好的选择。

最后

好了，本文到此结束，希望本文对你有所帮助 😃

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。