html div 虚线边框样式,纯CSS实现渐变虚线框和边框滚动动画

渐变虚线边框

如果对边框的样式细节不是很在意，我们可以借助反向镂空的方法实现，也就是虚线原本实色的地方和周围颜色融为一体，看上去透明，而原来虚框透明的部分透出渐变背景色，于是看上去像是渐变色。

以下是HTML和CSS：

.box {

width: 150px;

border: 2px dashed #fff;

background: linear-gradient(to bottom, #34538b, #cd0000);

background-origin: border-box;

}

.content {

height: 100px;

background-color: #fff;

}

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

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

借助CSS遮罩实现精致的渐变虚框，渐进增强，不支持遮罩的浏览器还是纯色虚框，这个方法HTML只需要一层标签即可，而且没有冗余的纯色覆盖，适用于各种背景场合，代码如下：

.box {

width: 200px;    height: 150px;    border: 2px dashed #cd0000;    box-sizing: border-box;}@supports (-webkit-mask: none) or (mask: none) {.box {

border: none;    background: linear-gradient(to bottom, #34538b, #cd0000) 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;}    }

由于这个虚框本质上是CSS绘制的，因此，我们可以随意控制虚线的虚实比例，非常灵活。

默认情况下，CSS遮罩可以让元素只显示遮罩图片有颜色部分的区域，那么在这里，我们只要使用mask属性绘制一个黑色虚框，就能实现真正意义上的渐变虚框效果了。

CSS mask遮罩包含属性和知识点非常多，也非常强大，这里就不展开详说了，有兴趣的朋友可以多搜索学习一下相关知识。

虚线边框滚动动画

内容占位

.box {

width: 200px;

background: repeating-linear-gradient(135deg, transparent, transparent 3px, #000 3px, #000 8px);

animation: shine 1s infinite linear;

overflow: hidden;

}

.content {

height: 128px;

margin: 1px; padding: 10px;

background-color: #fff;

}

@keyframes shine {

0% { background-position: -1px -1px;}

100% { background-position: -12px -12px;}

}

实线边框loading动画

实线的效果是一条边框实线，像个贪吃蛇一样，一直围着这个图片元素跑啊跑，跑啊跑，就像跑马灯那样一直不停歇。

实现原理其实也颇为简单，就是使用CSS clip属性对边框进行剪裁而已，使用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: 2px solid #cd0000;

animation: borderAround 1.5s infinite linear;

}

@keyframes borderAround {

0%, 100% { clip: rect(0 148px 2px 0); }

25% { clip: rect(0 148px 116px 146px); }

50% { clip: rect(114px 148px 116px 0); }

75% { clip: rect(0 2px 116px 0); }

}

实际上，要想loading效果好，应该两个线框相互驱逐，像下面这样：

   

.box {

display: inline-block;

padding: 10px;

position: relative;

}

.box::before {

content: '';

position: absolute;

left: 0; top: 0; right: 0; bottom: 0;

border: 2px solid #cd0000;

animation: borderAround 1.5s infinite linear;

}

.box::after {

content: '';

position: absolute;

left: 0;

top: 0;

right: 0;

bottom: 0;

border: 2px solid #cd0000;

animation: borderAround2 1.5s infinite linear;

}

@keyframes borderAround {

0%, 100% { clip: rect(0 148px 2px 0); }

25% { clip: rect(0 148px 116px 146px); }

50% { clip: rect(114px 148px 116px 0); }

75% { clip: rect(0 2px 116px 0); }

}

@keyframes borderAround2 {

50% { clip: rect(0 148px 2px 0); }

75% { clip: rect(0 148px 116px 146px); }

0%,100% { clip: rect(114px 148px 116px 0); }

25% { clip: rect(0 2px 116px 0); }

}

此效果应用场景应该说还是相当广泛的：一是可以用作强调和警示，例如某些非常重要的图文信息，就可以用这个边框动画，保证吸睛人人都会注意到；二是作为loading效果，尺寸可大可小，平常一个大容器里面加载东西，我们都是容器中间放个菊花，实际上，让容器边缘这个两条折线追逐效果也挺好的，或者把容器中的菊花换成同尺寸的边框动画也是可以的，既是创意，也是创新。