Page 99 - css揭秘

border: 15px 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>');

请注意，我们使用的切片尺寸是 1。这并不表示 1 像素；它所对应的是
SVG 文件的坐标系统（因此不需要单位）。如果我们用百分比来指定这些长
度，就只能采用 33.34% 这样的值来近似地获得图像尺寸的三分之一。近似
值总是有风险的，因为不是所有的浏览器都使用相同的计算精度。但如果使
用 SVG 文件的坐标系统作为度量单位，我们就不用为此头痛了。

它的效果展示在图 3-33 中。如你所见，我们的切角效果出来了，但还
缺少整片背景。我们有两种办法可以解决这个问题：要么提供一个背景色，
要么给 border-image 属性值加上 fill 关键字——这样它就不会丢掉 SVG
中央的那个切片了。在这个例子中，我们决定指定一个背景色，因为它还可
以发挥回退的作用。

图 3-33 顺便一提，你可能已经注意到了，我们的切角跟前面的技巧相比要小
把我们的 SVG 应用到 border- 一些，这令人有些困惑。我们明明已经指定 15px 作为边框宽度了啊！其
image 属性中
实原因在于，在渐变中，这个 15px 是沿着渐变轴来度量的，它的方向与
渐变推进的方向一致。边框宽度并不是斜向度量的，而是以水平或垂直方
向来度量的。你能看出它们的差别吗？对，我们又要请出万能的勾股定理
了，我们在“条纹背景”一节中就已经见过它了。图 3-34 应该可以很好地
解释这个问题。简而言之，为了得到相同的尺寸，我们需要把渐变中的尺
寸乘以 2 ，然后才能用在边框宽度属性中。在这个例子中，它实际上就是
15× 2 ≈ 21.213 203 436像素；可以取近似值 20px，除非我们绝对要求斜向
图 3-34
尺寸严格接近 15px：
把 border-width 指定为 15px，
所产生的切角尺寸（斜向度量结
15 border: 20px solid transparent;
果）为 2 ≈ 10.606 601 718 ，这 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;

但是，我们在图 3-35 中会发现，这实际上并没有得到我们期望的效果。
我们费尽周折创建的切角效果去哪儿了啊？别担心，年轻人，我们的切角其
实就在那儿。如果你把背景设置为另一种颜色，比如 #655，就会比较容
易理解事情的真相了。
图 3-35 如图 3-36 所示，原来这是因为背景色和切角边框混成一团了。接下来
我们美美的切角效果去哪儿了
要做的就是请出 background-clip 来修复这个问题，避免背景色蔓延到边
框区域：

68
第 3 章 形状

඀ࠡ JOEC