Page 101 - css揭秘

缘接近某个实色的背景图案。假如我们想设置其他类型的背景（比如纹理、
平铺图案或一道线性渐变），又该如何？
有另外一种方法不存在这种局限，但有着它自已独有的局限。还记得我
们在“菱形图片”中用到的 clip-path 属性吗？ CSS 裁切路径最神奇的地
不完全支持
方在于我们可以同时使用百分比数值（它会以元素自身的宽高作为基数度进
行换算）和绝对长度值，从而提供巨大的灵活性。
举个例子，如果用裁切路径将一个元素切出 20px 大小（以水平方向度
量）的斜面切角，代码可能如下：

background: #58a;
clip-path: polygon(
20px 0, calc(100% - 20px) 0, 100% 20px,
100% calc(100% - 20px), calc(100% - 20px) 100%,
20px 100%, 0 calc(100% - 20px), 0 20px
);

尽管这种方法的代码确实短了很多，但这并不意味着它是 DRY 的。如
果你不用预处理器，这就是它最大的缺陷。实际上，它是本节所述的所有
纯 CSS 方案中最不 DRY 的，因为如果要改动切角的尺寸，我们需要修改八
处！不过另一方面，改变背景倒是变得比较方便，只需修改一处即可。

这个方法最大的好处在于，我们可以使用任意类型的背景，甚至可以对
替换元素（比如图片）进行裁切。看看图 3-38 的这个例子，它给一张图片
设置了斜面切角样式。前面提到的任何一种方法都做不到这一点。此外，这
图 3-38
种方法还是支持动画效果的，我们不仅可以用动画的方式来改变切角的尺
运用 clip-path 属性给一张图片
设置斜面切角样式 寸，还可以彻底变换裁切形状。我们只需要为动画的终止状态指定另一条裁
切路径即可。

暂且不提代码不够 DRY 以及浏览器支持程度上的不足，它还有一个更
大的缺点，就是当内边距不够宽时，它会裁切掉文本，因为它只能对元素做
统一的裁切，并不能区分元素的各个部分。与此不同的是，渐变方案允许文
字溢出并超出切角区域（因为它只是背景图案）；而 border-image 方案则
会起到普通边框的作用，令文字折行。

关于未来 切角效果

未来，我们再也不需要费尽心机地动用 CSS 渐变、裁切或 SVG 来实现这个效果了。CSS 背景与边框（第
四版） （http://dev.w3.org/csswg/css-backgrounds-4/）将引入一个全新的属性 corner-shape，可以彻
底解决这个痛点。这个属性需要跟 border-radius 配合使用，从而产生各种不同形状的切角效果，而切
角的尺寸正是 border-radius 的值。举例来说，为容器的四个角指定 15px 的斜面切角就是如此简单：

border-radius: 15px;
corner-shape: bevel;

70 第 3 章 形状

඀ࠡ JOEC