css渐变虚线边框的实现

css渐变虚线边框的实现

 

问题

虽然这种实现兼容性不错，IE10+都支持，但是，虚实比例由于反过来了，因此，虚线太稀疏，而且边角无法形成直角。在实际项目中，是过不了设计师这一关的。

那有没有效果更精致的虚线边框渐变实现方法呢，有！我们可以借助CSS3 mask遮罩来实现。

借助CSS遮罩实现精致的渐变虚框

这个方法HTML只需要一层标签即可，而且没有冗余的纯色覆盖，适用于各种背景场合，HTML代码如下：