Page 80 - css揭秘

padding: 1em;
border: 16px solid transparent;
border-image: 16 repeating-linear-gradient(-45deg,
red 0, red 1em,
transparent 0, transparent 2em,
#58a 0, #58a 3em,
transparent 0, transparent 4em);

不过 border-image 方法存在一些问题。

„ 每当我们改变 border-image-slice 时，都需要同时修改 border-
width 来让它们相互匹配。 图 2-60
„ 由于我们不能在 border-image-slice 属性中使用 em 单位，只能把 现实世界里的老式信封
边框厚度指定为像素单位。
„ 条纹的宽度需要在色标的位置信息中写好，因此我们在改变条纹宽 小提示
度时，需要修改四处。
想要亲手验证这些问题，
请访问 play.csssecrets.io/
试一试 play.csssecrets.io/vintage-envelope vintage-envelope-border-
image。不妨改一改其中的值来体
这个技巧的另一个用武之地是生成好玩的蚂蚁行军边框！蚂蚁行军边框 验一下。
是一种虚线边框，看起在不断转动，就好像排队前进的蚂蚁一样（如果你把
虚线上的线段想像成一只只蚂蚁的话）。这个技巧在图形界面中的大量应用
可能完全出乎你的意料——几乎所有的图像编辑软件都会使用这个效果来标
示选区（参见图 2-62）。

为了创建蚂蚁行军效果，我们将会用到“老式信封”技巧的一个变种。
我们将把条纹转变为黑白两色，并把边框的宽度减少至 1px（注意到斜向条
纹是怎么转变成虚线边框的吗），然后再把 background-size 改为某个合适 图 2-61
我们的“老式信封”边框样式
的值。最后，我们把 background-position 以动画的方式改变为 100%，就
可以让它滚动起来了：

@keyframes ants { to { background-position: 100% } }

.marching-ants {
padding: 1em;
border: 1px solid transparent;
background:
linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg,
black 0, black 25%, white 0, white 50%
) 0 / .6em .6em;
animation: ants 12s linear infinite;
} 图 2-62

Adobe Photoshop 也使用“蚂蚁
你可以在图 2-63 中看到它的静止状态。显然，这个技巧不仅在实现
行军”技巧来标示选区
蚂蚁行军时很有用，还可以创建出各种特殊样式的虚线框：不管是为虚
线线段指定不同的颜色，还是自定义线段的长度和间隙的长度，全都不
在话下。

8 连续的图像边框 49

඀ࠡ JOEC