渐变虚线边框
如果对边框的样式细节不是很在意，我们可以借助反向镂空的方法实现，也就是虚线原本实色的地方和周围颜色融为一体，看上去透明，而原来虚框透明的部分透出渐变背景色，于是看上去像是渐变色。
以下是HTML和CSS：
.box{
width:150px;
border:2pxdashed#fff;
background:linear-gradient(tobottom,#34538b,#cd0000);
background-origin:border-box;
}
.content{
height:100px;
background-color:#fff;
}
问题：虽然这种方式兼容性不错，IE10+都支持，但是，虚实比例由于反过来了，因此，虚线太稀疏，而且边角无法形成直角。在实际项目中肯定过不了设计师这一关。
那有没有效果更精致的虚线边框渐变实现方法呢？当然有！我们可以借助CSS3 mask遮罩来实现。
借助CSS遮罩实现精致的渐变虚框，渐进增强，不支持遮罩的浏览器还是纯色虚框，这个方法HTML只需要一层标签即可，而且没有冗余的纯色覆盖，适用于各种背景场合，代码如下：
.box{
width:200px;height:150px;border:2pxdashed#cd0000;box-sizing:border-box;}@supports(-webkit-mask:none)or(mask:none){.box{
border:none;background:linear-gradient(tobottom,#34538b,#cd0000)no-repeat;-webkit-mask-image:linear-gradient(toright,#0006px,transparent6px),linear-gradient(tobottom,#0006px,transparent6px),linear-gradient(toright,#0006px,transparent6px),linear-gradient(tobottom,#0006px,transparent6px);-webkit-mask-repeat:repeat-x,repeat-y,repeat-x,repeat-y;-webkit-mask-position:00,00,0100%,100%0;-webkit-mask-size:8px2px,2px8px,8px2px,2px8px;/*合并写法*/
mask:linear-gradient(toright,#0006px,transparent6px)repeat-x,
linear-gradient(tobottom,#0006px,transparent6px)repeat-y,
linear-gradient(toright,#0006px,transparent6px)repeat-x0100%,
linear-gradient(tobottom,#0006px,transparent6px)repeat-y100%0;mask-size:8px2px,2px8px,8px2px,2px8px;}}
由于这个虚框本质上是CSS绘制的，因此，我们可以随意控制虚线的虚实比例，非常灵活。
默认情况下，CSS遮罩可以让元素只显示遮罩图片有颜色部分的区域，那么在这里，我们只要使用mask属性绘制一个黑色虚框，就能实现真正意义上的渐变虚框效果了。
CSSmask遮罩包含属性和知识点非常多，也非常强大，这里就不展开详说了，有兴趣的朋友可以多搜索学习一下相关知识。
虚线边框滚动动画
内容占位
.box{
width:200px;
background:repeating-linear-gradient(135deg,transparent,transparent3px,#0003px,#0008px);
animation:shine1sinfinitelinear;
overflow:hidden;
}
.content{
height:128px;
margin:1px;padding:10px;
background-color:#fff;
}
@keyframesshine{
0%{background-position:-1px-1px;}
100%{background-position:-12px-12px;}
}
实线边框loading动画
实线的效果是一条边框实线，像个贪吃蛇一样，一直围着这个图片元素跑啊跑，跑啊跑，就像跑马灯那样一直不停歇。
实现原理其实也颇为简单，就是使用CSSclip属性对边框进行剪裁而已，使用clip属性是因为兼容性好，如果你的项目不需兼容IE，则可以使用clip-path属性来剪裁。
.box{
display:inline-block;
padding:10px;
position:relative;
}
.box::before{
content:'';
position:absolute;
left:0;top:0;right:0;bottom:0;
border:2pxsolid#cd0000;
animation:borderAround1.5sinfinitelinear;
}
@keyframesborderAround{
0%,100%{clip:rect(0148px2px0);}
25%{clip:rect(0148px116px146px);}
50%{clip:rect(114px148px116px0);}
75%{clip:rect(02px116px0);}
}
实际上，要想loading效果好，应该两个线框相互驱逐，像下面这样：
.box{
display:inline-block;
padding:10px;
position:relative;
}
.box::before{
content:'';
position:absolute;
left:0;top:0;right:0;bottom:0;
border:2pxsolid#cd0000;
animation:borderAround1.5sinfinitelinear;
}
.box::after{
content:'';
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
border:2pxsolid#cd0000;
animation:borderAround21.5sinfinitelinear;
}
@keyframesborderAround{
0%,100%{clip:rect(0148px2px0);}
25%{clip:rect(0148px116px146px);}
50%{clip:rect(114px148px116px0);}
75%{clip:rect(02px116px0);}
}
@keyframesborderAround2{
50%{clip:rect(0148px2px0);}
75%{clip:rect(0148px116px146px);}
0%,100%{clip:rect(114px148px116px0);}
25%{clip:rect(02px116px0);}
}
此效果应用场景应该说还是相当广泛的：一是可以用作强调和警示，例如某些非常重要的图文信息，就可以用这个边框动画，保证吸睛人人都会注意到；二是作为loading效果，尺寸可大可小，平常一个大容器里面加载东西，我们都是容器中间放个菊花，实际上，让容器边缘这个两条折线追逐效果也挺好的，或者把容器中的菊花换成同尺寸的边框动画也是可以的，既是创意，也是创新。
