转自:张鑫旭的博客
实现虚线-渐变-边框有以下两种方法
第一种方法: 反向镂空
代码如下:
1 | <div class="box"> |
1 | .box { |
问题:IE10+都能用,但是不能实现直角的边框,所以实用性堪忧。如果设计师对此要求不高,且正好要圆角边框,就可以直接拿来用了。
第二种方法: 借助CSS遮罩
代码如下:
1 | <div class="box"></div> |
1 | .box { |
转自:张鑫旭的博客
转自:张鑫旭的博客
实现虚线-渐变-边框有以下两种方法
代码如下:
1 | <div class="box"> |
1 | .box { |
问题:IE10+都能用,但是不能实现直角的边框,所以实用性堪忧。如果设计师对此要求不高,且正好要圆角边框,就可以直接拿来用了。
代码如下:
1 | <div class="box"></div> |
1 | .box { |
转自:张鑫旭的博客
本文标题:虚线-渐变-边框的实现
文章作者:老米的世界
发布时间:2018年11月14日 - 20:10
最后更新:2019年09月05日 - 22:06
原始链接:http://mpfly.github.io/2018/11/14/虚线-渐变-边框的实现/
许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。
微信支付
支付宝