Page 98 - css揭秘
P. 98
图 3-30
g2geogeske.com 网站很好地驾
驭了内凹圆角设计风格；设计师
把它作为一种核心设计元素，因
为内凹圆角不仅出现在导航中，
还出现在内容中，甚至是页脚中
你可以在图 3-31 中看到效果。跟前一段所述的技巧类似，切角的大小 图 3-31
可以通过色标的位置信息来控制，而且我们同样可以用一个 mixin 来改善这 使用径向渐变生成的内凹圆角
段代码的可维护性。 效果
试一试 play.csssecrets.io/scoop-corners
内联 SVG 与 border-image 方案
虽然基于渐变的方案是行之有效的，但也不是完全没有问题。
它的代码还是非常烦琐冗长的。在常规设计中，四个角的切角尺寸
往往是一致的，但我们在改变这个值时仍然需要修改四处。与此类
似，我们在改变背景色的时候也需要修改四处，如果算上回退背景
色的话就是五处。
它的烦琐导致我们完全不可能（在某些浏览器下）让各个切角的尺
寸以动画的方式发生变化。
谢天谢地，我们还有其他一些方法可供选择，具体采用哪种方法取决于
实际需求。其中之一就是使用 border-image，并通过一个内联的 SVG 图像
来产生切角效果。基于 border-image 的工作原理（如果对此有些淡忘，不
妨回头看看图 3-32 的科普），你能想像出这个 SVG 图像的样子吗？
由于尺寸无关紧要（border-image 会解决缩放问题，而 SVG 可以实现
与尺寸完全无关的完美缩放——这就是矢量图的好处），每个切片的尺寸都
可以设置为 1，以便理解和书写。切角的尺寸是 1，直线边缘也都是 1。它 图 3-32
边框图像是基于 SVG 的，切割线
（放大后）的样子如图 3-32 所示。相应的代码可能是这样的： 也标示了出来
12 切角效果 67
ࠡ JOEC
