Page 70 - css揭秘
P. 70
linear-gradient(45deg,
rgba(0,0,0,.25) 25%, transparent 0,
transparent 75%, rgba(0,0,0,.25) 0),
linear-gradient(45deg,
rgba(0,0,0,.25) 25%, transparent 0,
transparent 75%, rgba(0,0,0,.25) 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;
图 2-50
现在我们把四层渐变简化成了两层渐变，但代码仍然跟以前一样 这幅图案本身就比较复杂，而且
1①
WET 。为了改变棋盘的主色调或者是方格的尺寸，我们还是需要修改四个 它的实现原理也相当复杂，难以
理解，尤其是在把四层渐变精简
地方。在这一点上，使用预处理器的 mixin 来简化代码可能是一个好主意。
为两层时。因此，我会用显眼的
比如，用 Sass 写的代码可能就是这样的：
颜色来突出某个渐变或渐变中的
某个色标，这通常有助于理解这
@mixin checkerboard($size, $base, SCSS 个图案是如何构成的。举例来
$accent: rgba(0,0,0,.25)) { 说，这里的第一层渐变是用
background: $base; rebeccapurple 来展示的，不是
background-image: 半透明的黑色，而两层贴片也都
linear-gradient(45deg, 用虚线框标示出来了
① WET 的意思是 We Enjoy Typing（我们喜欢敲键盘），是 DRY 的反义词。它表示繁琐重复、
无法维护的代码。
关于未来 角向渐变
未来在创建棋盘图案时，我们再也不需要小心翼翼地去拼合三角形了。
CSS 图像（第四版） （http://w3.org/TR/css4-images）定义了一种新
的渐变形式，可以生成角向渐变（也称作圆锥渐变）。这种渐变的效果
通常看起来像是一个俯视的圆锥体，因此得名。它们的生成方式是这
样的：所有色标的颜色变化是由一条射线绕着端点旋转来推进的。举
个例子，以下渐变代码可以创建一个色轮：
background: conic-gradient(red, yellow, lime, aqua, blue, fuchsia, red);
除了色轮之外，角向渐变在很多地方都大有用武之地：放射状的光芒、金属拉丝效果，以及其他各种各样
的背景，其中包括（猜对了！）棋盘图案。我们只需要一个角向渐变就可以实现如图 2-44 所示的贴片了：
background: repeating-conic-gradient(#bbb 0, #bbb 25%, #eee 0, #eee 50%);
background-size: 30px 30px;
遗憾的是，直到我写作的此刻，还没有任何浏览器支持角向渐变；不过你可以在 leaverou.github.io/conic-
gradient 找到一个 polyfill。
测一测 play.csssecrets.io/test-conic-gradient
6 复杂的背景图案 39
ࠡ JOEC
