實現虛線-漸變-邊框有以下兩種方法

第一種方法： 反向鏤空

程式碼如下：

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

css:
.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遮罩

程式碼如下：

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

css:
.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;
      }
    }
 

效果如下：