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

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

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

看看,使用渐变模拟的虚线如下:

解释一下上面的代码:

  1. linear-gradient(90deg, #333 50%, transparent 0),实现一段渐变内容,100% - 50% 的内容是 #333 颜色,剩下的一半 50% - 0 的颜色是透明色 transprent
  2. repeat-x 表示只在 x 方向重复
  3. background-size: 4px 1px 表示上述渐变内容的长宽分别是 4px\ 1px,这样配合 repeat-x就能实现只有 X 方向的重复
  4. 最后的 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 实现带圆角的虚线边框的方式:

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

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

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

最后

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

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

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

热门相关:凤逆天下:战神杀手妃   一品侍卫   凤逆天下:腹黑魔君妖娆后   苏医生,你笑起来很好看   魔葫