Page 96 - css揭秘

linear-gradient(-45deg, transparent 15px, #58a 0),
linear-gradient(45deg, transparent 15px, #655 0);

可是，我们在图 3-26 中可以发现，这样写是行不通的。默认情况下，
这两层渐变都会填满整个元素，因此它们会相互覆盖。需要让它们都缩小一
些，于是我们使用 background-size 让每层渐变分别只占据整个元素一半
的面积。

background: #58a;
background: 图 3-26
linear-gradient(-45deg, transparent 15px, #58a 0) 尝试给底部的两个角设置切角样
right,
linear-gradient(45deg, transparent 15px, #655 0) 式，但失败了
left;
background-size: 50% 100%;

我 们 可 以 在 图 3-27 中 看 到 结 果。 如 你 所 见， 尽 管 我 们 已 经 用 了
background-size，但这两层渐变仍然是相互覆盖的。原因在于，我们忘记
把 background-repeat 关掉了，因而每层渐变图案各自平铺了两次。这导
致我们的两层渐变背景仍然是相互覆盖的，只不过这次是因为背景平铺。改
进后的代码是这样的：
图 3-27
background: #58a;
background: 只用 background-size 还是不够
linear-gradient(-45deg, transparent 15px, #58a 0) 的
right,
linear-gradient(45deg, transparent 15px, #655 0)
left;
background-size: 50% 100%;
background-repeat: no-repeat;

你可以在图 3-28 中看最终效果——我们终于成功了！看到这里，你应
该已经猜到怎样把四个角都做出切角效果了。你需要四层渐变图案，代码如
下所示：

background: #58a; 图 3-28
background: 左下角和右下角的切角效果终于
linear-gradient(135deg, transparent 15px, #58a 0)
top left, 实现了
linear-gradient(-135deg, transparent 15px, #58a 0)
top right,
linear-gradient(-45deg, transparent 15px, #58a 0)
bottom right,
linear-gradient(45deg, transparent 15px, #58a 0)
bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;

你可以在图 3-29 中看到结果。上面这段代码有一个问题，它的可维护 图 3-29
性并不理想。我们在改变背景色时需要修改五处；而在改变切角尺寸时需要
通过四层渐变图案，就可以给四
修改四处。使用预处理器的 mixin 可以帮助我们减少代码的重复度。如果用 个角都加上切角效果

12 切角效果 65

඀ࠡ JOEC