虚线-渐变-边框的实现

转自:张鑫旭的博客

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

第一种方法: 反向镂空

代码如下:

1
2
3
<div class="box">
<div class="content"></div>
</div>
1
2
3
4
5
6
7
8
9
10
.box {
width: 150px;
border: 2px dashed #fff;
background: linear-gradient(to bottom, #ff1481, #ff5d3e);
background-origin: border-box;
}
.content {
height: 100px;
background-color: #fff;
}

效果如下:
chrome浏览器下的样子

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

第二种方法: 借助CSS遮罩

代码如下:

1
<div class="box"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.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;
}
}

效果如下:
chrome效果图

转自:张鑫旭的博客

-------------本文结束感谢您的阅读-------------

本文标题:虚线-渐变-边框的实现

文章作者:老米的世界

发布时间:2018年11月14日 - 20:10

最后更新:2019年09月05日 - 22:06

原始链接:http://mpfly.github.io/2018/11/14/虚线-渐变-边框的实现/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

老米的世界 wechat
欢迎关注我的微信公众号!
坚持原创技术分享,您的支持将鼓励我继续创作!