Page 100 - css揭秘

border: 20px solid transparent;
border-image: 1 url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg"\
width="3" height="3" fill="%2358a">\
<polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\
</svg>');
background: #58a;
background-clip: padding-box;
图 3-36
把背景色设置为另一种颜色，终
这样一来，问题就解决了，我们的容器现在看起来完全就是图 3-29 中
于解开了“切角消失”的谜团
的效果了。终于，我们做到了在改变切角尺寸时只改一处：只需修改边框宽
度就可以了。我们甚至可以给它加上动画，因为 border-width 属性是支持
动画的！我们还做到了在改变背景色时只改两处，而不是五处。此外，由于
背景效果跟切角效果是相互独立的，我们甚至可以把背景设置为一层渐变图
案或者其他图案，只要图案边缘处的颜色是 #58 就行。来看看图 3-37 这
个例子吧，它就使用了一幅由 hsla(0,0%,100%,.2) 过渡到 transparent 的
径向渐变图案。
图 3-37
我们只剩下最后一个小问题了。在不支持 border-image 的环境下，回
切角与径向渐变背景组合之后的
退的结果就不仅是没有切角效果了。由于背景裁切，它看起来好像在容器的 效果
边缘和内容之间缺了一圈空隙。为了修复这个问题，我们可以给边框指定与
背景一致的颜色：

border: 20px solid #58a;
border-image: 1 url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg"\
width="3" height="3" fill="%2358a">\
<polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\
</svg>');
background: #58a;
background-clip: padding-box;

当 border-image 属性生效时，这个边框色就会被忽略；但当 border-
image 不支持时，边框色就可以提供一个更加平稳的回退措施，此时的结果
如图 3-35 所示。不过随之来而的一个缺点就是，当我们改变背景色时要修
改的地方会增加到三处。

试一试 play.csssecrets.io/bevel-corners

向 Martijn Saly（http://twitter.com/martijnsaly）脱帽致敬，感谢他在 2015 年
1 月 5 日 的 一 条 推 文（http://twitter.com/martijnsaly/status/552152520114855936）
中首次提出用 border-image 和内联 SVG 实现斜面切角的创意。 致 敬

裁切路径方案

前面所述的 border-image 方案确实非常紧凑，也比较 DRY，但它还是
存在一些局限。举个例子，我们要么指定某个实色的背景，要么指定一个边

12 切角效果 69

඀ࠡ JOEC