浅析纯css实现虚线渐变边框的2种方式：反向镂空与mask遮罩

　　border-image 可以实现实线渐变边框，但是如果需要虚线渐变边框，则设置 dashed 之后，还是实线，那么如何实现虚线渐变边框呢？

一、反向镂空的方式

　　如果对边框的样式细节不是很在意，则可以借助反向镂空的方法实现，也就是虚线原本实色的地方和周围颜色融为一体，看上去透明，而原来虚框透明的部分透出渐变背景色，于是看上去像是渐变色。

<div class="box">
    <div class="content"></div>
</div>
.box {
    width: 150px;
    border: 2px dashed #fff;
    background: linear-gradient(to bottom, #34538b, #cd0000);
    background-origin: border-box;
}
.content {
    height: 100px;
    background-color: #fff;
}

　　效果就像这样，其实可以理解为 2px dashe #fff，白色的是本来的边框，透明出来的原 box 内容的渐变底色是原来的虚线镂空位置

　　虽然这种实现兼容性不错，IE10+都支持，但是，虚实比例由于反过来了，因此，虚线太稀疏，而且边角无法形成直角。在实际项目中，是过不了设计师这一关的。 那有没有效果更精致的虚线边框渐变实现方法呢，有！我们可以借助CSS3 mask遮罩来实现

二、借助CSS遮罩实现精致的渐变虚框

　　这个方法HTML只需要一层标签即可，而且没有冗余的纯色覆盖，适用于各种背景场合，HTML代码如下：

<div class="box"></div>

　　CSS代码如下，渐进增强，不支持遮罩的浏览器还是纯色虚框：

.box {
    width: 200px;
    height: 150px;
    border: 2px dashed #cd0000;
    box-sizing: border-box;
}
@supports (-webkit-mask: none) or (mask: none) {
  .box {
    border: none;
    background: linear-gradient(to bottom, #34538b, #cd0000) no-repeat;
    -webkit-mask: linear-gradient(to right, red 6px, transparent 6px) repeat-x,
          linear-gradient(to bottom, red 6px, transparent 6px) repeat-y,
          linear-gradient(to right, #000 6px, transparent 6px) repeat-x 0 100%,
          linear-gradient(to bottom, #000 6px, transparent 6px) repeat-y 100% 0;
    -webkit-mask-size: 8px 2px, 2px 8px, 8px 2px, 2px 8px;
  }
}

　　这个虚框本质上是CSS绘制的，因此，我们可以随意控制虚线的虚实比例，非常灵活。就是上面的 mask-size 和 mask 里的 6px，需要注意的是 6px 那里不能设置为大于 mask-size 的 8px，否则会变成实线

　　更多内容可见这篇文章：《妙法攻略：渐变虚框及边框滚动动画的纯CSS实现》- https://www.zhangxinxu.com/wordpress/2018/08/css-gradient-dashed-border/