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

2024-01-16

2160 字约 8 分钟

...

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

这个我们使用 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
    );
}