玩转虚线边框

为一个 DIV 元素设置虚线边框，大家都知道怎么做。简单的设置 border: 1px dashed #000 即可。这里面 dashed 即能产生我们今天要讲的"猪脚" —— 虚线边框。

那么虚线边框有什么样不广为人知的秘密呢？我们用三个效果来和大家一起体验下虚线边框的魅力所在。

透明三角

当我们在设计图中发现有一个三角形，你可能为了省去一张图片而选择使用 CSS border 方式模拟三角形。

div {
    width: 0px; height: 0px;
    border-width: 100px;
    border-color: #fff #f00 #fff #fff;
    border-style: solid;
}

上面的代码我们实现了一个红色的箭头，但是...

在有背景色的情况下，三个白色边框暴露无遗。

暴露的白色边框

当然我们可以将边框颜色设置成背景色，但是当背景是个非纯色块的图片的情况下，就只能选择将三个边框变成透明状态了。

高级浏览器都支持 RGBA 方式设置颜色，我们可以简单的修改一下边框颜色的设置

border-color: rgba(0, 0, 0, 0) rgba(255, 0, 0, 1)  rgba(0, 0, 0, 0)  rgba(0, 0, 0, 0) ;

除了右边的边框，剩下三个边框都变成了透明，我们的目标，似乎实现了。

透明边框

可能细心的你注意到了 高级浏览器都支持 这几个字，什么意思？意思就是 IE6、7、8 都不支持 RGBA。

:cry::cry::cry::cry::cry:

先别计算你心中的阴影面积了，在 IE678 下，怎么实现透明边框呢？

设置成虚线就可以。

把上面的代码修改成这样。

div {
    width: 0px; height: 0px;
    border-width: 100px;
    border-color: #fff #f00 #fff #fff;
    border-style: dashed solid dashed dashed;
}

被设置 dashed 的边框，在 IE678 下，变成了透明。

ie678

效果和使用 RGBA 一样呢。

这是因为 IE 下，设置边框为虚线需要满足边框宽度不大于元素宽高最大值的三分之一才会显示。

查看效果

蚂蚁线

看完了上面透明三角的小故事，我们再来用虚线实现一个蚂蚁线效果。

等等，你问我蚂蚁线是什么？用过 PS 的话，你就会发现，在一个选区的范围边界，会有一个一直动啊动的线框，就好像一排蚂蚁在爬似得，这个就是蚂蚁线了。

这次我们借用 SVG 元素 path 来实现蚂蚁线效果，为什么不是普通的 HTML 元素？这个我们后面再讲。

<svg>
    <path d="M5 5 L105 5 L105 105 L5 105 L5 5">
</svg>

上面的代码中我们用 path 元素创建了一个正方形，现在我们给它加上红色边框。

path {
    /* fill 设置填充色 */
    fill: none;

    /* stroke 设置边框颜色 */
    stroke: red;

    /* stroke-width 设置边框宽度 */
    stroke-width: 1px;
}

SVG边框

SVG 元素的虚线边框不同于 HTML 元素的设置，需要使用 stroke-dasharray 样式。

我们来看看加上 stroke-dasharray: 5px 后的样子。

虚线path

虚线产生了，并且我们发现虚线长度和虚线之间的间隔都是 5 像素。

虚线长度

虽然已经有虚线的边框了，但是还没有动起来啊。我们这里需要结合使用 stroke-dashoffset 和 animation 来产生蚂蚁爬行的效果。

animation: move 1s linear infinite;

@keyframes move {
    from {
        stroke-dashoffset: 0px;
    }
    to {
        stroke-dashoffset: 10px;
    }
}

大家可以将 stroke-dashoffset 直观的理解为对虚线段的偏移，比如原先从 0 像素开始的第一个线段，在偏移 10 像素后，就应该出现在 10 像素的位置。

那么为什么 stroke-dashoffset 设置为 10px 呢？这是因为我们将虚线的长度设置了 5 像素，动画 move 每 1 秒都需要偏移一个虚线段的长度加上一个间隔的长度，即 10 像素，才能产生流畅逼真的蚂蚁线效果。

查看效果

描边动画

从上面的蚂蚁线效果转变一下，我们看看一个描边动画怎么产生。

先看下描边动画的效果

我们既然可以使用 stroke-dasharray 设置虚线段的长度，那么将虚线段的长度设置成 path 元素的周长（上例中是 400 像素长），会怎么样呢？

示意图

本该是虚线的边框，俨然又变回了实线。这是因为我们把一个虚线段的长度设置成了周长。

这时候，我们再设置一个动画，将线段的偏移值从 400 像素，变到 0 像素。

path {
    stroke-dasharray: 400px;
    animation: move 1s linear infinite;
}

@keyframes move {
    from {
        stroke-dashoffset: 400px;
    }
    to {
        stroke-dashoffset: 0px;
    }
}

我们可以看到，正方形的边长从无到有，有了一个描边的动画。

查看效果

是不是很酷？在路径曲折难以计算出周长的情况下，我们也可以使用一个大于周长的值设置虚线的长度以及偏移。

学会了利用 stroke-dashoffset 和 stroke-dasharray 制作描边动画，你可以利用它来制作很多有趣的效果，比如签名动画、勾线动画等。

YIXUNFE / blog