边框攻略：纯CSS渐变虚框、边框滚动动画

这篇文章发布于 2018年08月30日，星期四，01:28，归类于CSS相关。 阅读 60 次, 今日 59 次

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=7975

本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。

一、渐变虚线边框的实现

前段时间，有位小伙伴在微博上问了我这么一个虚线边框如何实现渐变效果的问题：

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

如下HTML和CSS：

<div class="box">
    <div class="content"></div>
</div>

.box {
    width: 150px;
    border: 2px dashed #fff;
    background: linear-gradient(to bottom, #34538b, #cd0000);
    background-origin: border-box;
}
.content {
    height: 100px;
    background-color: #fff;
}

实时效果如下：

Chrome 68截图效果如下：

问题

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

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

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

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

<div class="box"></div>

CSS代码如下，渐进增强，不支持遮罩的浏览器还是纯色虚框：

.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;
    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;
  }    
}

实际使用的时候， mask 属性还需要加下 -webkit- 私有前缀，这里示意目的，因此简化了代码。

实现的渐变虚框效果如下截图：

眼见为实，您可以狠狠地点击这里： 基于CSS遮罩实现的渐变虚框效果demo

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

关于CSS遮罩

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

CSS mask 遮罩包含属性和知识点非常多，也非常强大，有兴趣可以预留足够时间看看我之前写的“ CSS遮罩CSS3 mask/masks详细介绍 ”一文。

二、虚线边框滚动动画

百度ueditor编辑器网站首页（http://ueditor.baidu.com/website/）底部有一个滚动虚框的效果，如下GIF示意：

当时我看到这个效果的时候，很兴奋，没想到做这个官网页面的还是个CSS牛人！等我打开控制台一看——恩，原来是JS计算实现的，我就默默地关掉了页面，假装刚才什么都没发生过。

实际上，这种效果三两行CSS代码就可以实现，且IE10+浏览器都支持。

如下HTML和CSS：

<div class="box">
    <div class="content">内容占位</div>
</div>

.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;}
}

实现的边框运动效果如下GIF：

眼见为实，您可以狠狠地点击这里： CSS实现虚线边框旋转动画demo

实现原理

这种边框跑马灯一样的效果的实现原理，我在很早之前有介绍过，可参见“ 使用CSS实现Photoshop选区效果 ”一文。

边框区域镂空，然后背景图片设为下面这个GIF平铺背景即可：

例如下面这个水果的选区背景效果：

这里的边框滚动效果也是类似的，只是我们的斜纹是使用CSS3重复线性渐变属性 repeating-linear-gradient 实现的，而规律运动是CSS3动画实现的，于是，最终实现了视觉上的虚线边框滚动效果。这种视觉感受跟小时候看发廊里面那个旋转的斜纹柱子其实有异曲同工之处。

三、一个实线边框loading动画

先看效果吧，不过GIF截图尺寸会比较大，我就直接放一个静态图吧：

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

您可以狠狠地点击这里： CSS实线边框loading动画demo

实现原理其实也颇为简单，就是使用CSS clip 属性对边框进行剪裁而已，使用 clip 属性是因为兼容性好，如果你的项目不需要管IE，则可以使用 clip-path 属性来剪裁（可参见我之前文章“ CSS3/SVG clip-path属性简介 ”）。

具体HTML和CSS代码如下：

<div class="box">
    <img src="mm1.jpg" width="128" height="96">
</div>

.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效果好，应该两个线框相互驱逐，本demo为了避免干扰，某人就一个线框悠悠地转，如果想要显示2个线框相互追逐，demo页面是留了彩蛋的，点击图片即可，会变成下面这样：

此效果应用场景个人觉得还是相当广泛的。

一是强调和警示，例如某些非常重要的申明，就可以用这个边框动画，保证人人都会注意到。

二是作为loading效果。并且可大可小，平常一个大容器里面加载东西，我们都是容器中间放个菊花，实际上，让容器边缘这个两条折线追逐效果也挺好的；或者把容器中的菊花换成同尺寸的边框动画也是可以的，很有心意，保证创新。

四、结束语

本文的CSS小技巧都是源自平时的积累，当你掌握足够扎实的基础的时候，才能有各种思路和想法，否则，只能拾人牙慧，难有创新。

本文的完成共占用了我4个晚上的业余时间。

现在上年纪，肝不动了，超过1点就顶不住，我也认了。前3个晚上，一个晚上整一个demo，今天写文字。要是年轻的时候，肯定2晚搞定，第一晚一口气弄完所有demo，估计要到凌晨3,4点，第二晚，就像今天这样，搞到1~2点。

现在想想，远没有年轻的时候勤奋了，以前刚开始工作时候，上厕所时候都捧着个技术书籍再啃，现在上厕所不是刷微博就是刷朋友圈。以前写文章，开头可以有一半的篇幅唠叨各种废话，现在不行了，你看这篇文章，直接开门见山。而且老实讲，我本来计划是按照《延禧攻略》的剧本写本文的，我是一个小边框，名叫魏璎框，因为想要替姐姐报仇，我需要学会几个技能，一是渐变边框，然后边框动画……后来想想还是算了，按照剧本模式写，又要多一个晚上，我这边积压的活已经排成队了，不能再拖了，所以还是老老实实地写。

哎呀哎呀，不能再扯来扯去了，罪过罪过。

边框动画还有很多很酷的效果，例如和 border-radius 配合，可以实现转弯边框动画效果，这个以后有机会再演示。

就这些，3个与边框有关的tips三合一，希望可以对你的工作学习有所帮助。

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。

本文地址： https://www.zhangxinxu.com/wordpress/?p=7975

（本篇完）