虚线-渐变-边框的实现

转自：张鑫旭的博客

实现虚线-渐变-边框有以下两种方法

第一种方法： 反向镂空

代码如下：

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

.box {
	width: 150px;
	border: 2px dashed #fff;
	background: linear-gradient(to bottom, #ff1481, #ff5d3e);
	background-origin: border-box;
}
.content {
	height: 100px;
	background-color: #fff;
}

效果如下:

问题：IE10+都能用，但是不能实现直角的边框，所以实用性堪忧。如果设计师对此要求不高，且正好要圆角边框，就可以直接拿来用了。

第一种方法： 借助CSS遮罩

代码如下：

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

.box {
      width: 200px;
      height: 150px;
      border: 2px dashed #ff5d3e;
      box-sizing: border-box;
}

    @supports (-webkit-mask: none) or (mask: none) {
      .box {
        border: none;
        background: linear-gradient(to bottom, #ff1481, #ff5d3e) no-repeat;
        -webkit-mask-image: linear-gradient(to right, #000 6px, transparent 6px), 
                            linear-gradient(to bottom, #000 6px, transparent 6px), 
                            linear-gradient(to right, #000 6px, transparent 6px), 
                            linear-gradient(to bottom, #000 6px, transparent 6px);
        -webkit-mask-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
        -webkit-mask-position: 0 0, 0 0, 0 100%, 100% 0;
        -webkit-mask-size: 8px 2px, 2px 8px, 8px 2px, 2px 8px;

        /* 合并写法 */
        mask: linear-gradient(to right, #000 6px, transparent 6px) repeat-x,
              linear-gradient(to bottom, #000 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;
        mask-size: 8px 2px, 2px 8px, 8px 2px, 2px 8px;
      }
    }

效果如下：

转自：张鑫旭的博客