Page 95 - css揭秘
P. 95
使用三角形盖住元素的顶角来模拟切角效果（当网页背景是纯色时），或者
使用一张或多张已经切过角的图片来作为整个元素的背景。
图 3-24
以这个网站为例，它就在设计
中运用到了切角效果（“Find &
Book”半透明区块的左下角）
这些方案显然都不够灵活、难以维护，而且增加了网页的加载时间：不
仅增加了额外的 HTTP 请求，而且网页所需的文件体积也增加了。我们还有
更好的方法吗？
解决方案
第一种方案来自于无所不能的 CSS 渐变。假设我们只需要一个角被切
掉的效果，以右下角为例。这其中最大的窍门在于充分利用渐变的一大特
性：渐变可以接受一个角度（比如 45deg）作为方向，而且色标的位置信息
也可以是绝对的长度值，这一点丝毫不受容器尺寸的影响。
综合以上这些想法，我们只需要一个线性渐变就可以达到目标。这个渐
图 3-25 变需要把一个透明色标放在切角处，然后在相同位置设置另一个色标，并且
元素右下角的切角效果是由简单 把它的颜色设置为我们想要的背景色。CSS 代码如下所示（假设切角的深度
的 CSS 渐变实现的 是 15px）：
background: #58a;
background:
linear-gradient(-45deg, transparent 15px, #58a 0);
很简单，对吧？你可以在图 3-25 中看到结果。事实上，第一行声明
并不是必需的，加上它是将其作为回退机制：如果某些浏览器不支持 CSS
小提示
渐变，那第二行声明会被丢弃，而此时我们至少还能得到一个简单的实色
我们为两层渐变使用了不同 背景。
的颜色（ #58a 和 #655）以
便更好地调试。在实际开发中， 现在，假设我们想要两个角被切掉的效果，以底部的两个角为例。我们
它们的颜色应该是相同的。 只用一层渐变是无法做到这一点的，因此要再加一层。我们最初的想法可能
是这样的：
background: #58a;
background:
64 第 3 章 形状
ࠡ JOEC
