Page 81 - css揭秘
P. 81
当前，如果要通过 border-image 来实现类似的效果，唯一的办法
是 为 border-image-source 指 定 一 个 GIF 动 画， 就 像 chrisdanford.com/
blog/2014/04/28/marching-ants-animated-selection-rectangle-in-css 所展示
的那样。当浏览器开始支持渐变插值的时候，我们还可以用渐变来实现它，
只不过有点烦琐、不够 DRY。
图 2-63 试一试 play.csssecrets.io/marching-ants
我们不太可能在书里展示出“蚂
蚁行军”的动画效果（在静止状 当然，border-image 也有它强大的地方，尤其是在搭配渐变图案时更
态下它看起来只是个虚线框）；
请访问动态的演示页面吧，它真 是威力倍增。举个例子，假设我们需要一个顶部边框被裁切的效果，就像
的很好玩 一般的脚注那样。我们所需要的就是 border-image 属性再加上一条由渐
变生成的垂直条纹，并把要裁切的长度在渐变中写好。边框线的粗细交给
border-width 来控制。代码看起来是这样的：
border-top: .2em solid transparent;
border-image: 100% 0 0 linear-gradient(90deg,
currentColor 4em,
transparent 0);
padding-top: 1em;
效果如图 2-64 所示。不仅如此，由于我们把所有属性都指定为 em 单
位，效果会根据 font-size 的变化而自动调整。另外，由于我们使用了
currentColor，它也会根据 color 属性的变化而自动适应（假设我们希望
这条边框跟文字保持相同的颜色）。
图 2-64
顶部边框的裁切效果，用来模拟
传统的脚注
试一试 play.csssecrets.io/footnote
CSS 背景与边框
http://w3.org/TR/css-backgrounds 相关规范
CSS 图像
http://w3.org/TR/css-images
50 第 2 章 背景与边框
ࠡ JOEC
