转自:张鑫旭的博客
实现虚线-渐变-边框有以下两种方法
第一种方法: 反向镂空
代码如下:
<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;
}
}
效果如下:
转自:张鑫旭的博客