Page 69 - css揭秘

（参见图 2-47）：

background: #eee;
background-image:
linear-gradient(45deg, transparent 75%, #bbb 0);
background-size: 30px 30px;

图 2-46 你能猜到把它们组合在一起时会发生什么吗？代码是这样的（结果如图
这些直角三角形的四周有很多 2-48 所示）：
空隙
background: #eee;
background-image:
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
background-size: 30px 30px;

乍看起来，这样的效果似乎并不是我们想要的。但是，我们只需要把第
二层渐变在水平和垂直方向均移动贴片长度的一半，就可以把它们拼合成一
图 2-47 个完整的方块：
如果我们完全颠倒色标的顺序，
就能得到相反方向的三角形了 background: #eee;
background-image:
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;

你能猜到它的结果是什么样子吗？就是我们一直想要实现的效果，如图
2-49 所示。请注意这本质上只是棋盘的一半。要把它转变为一幅完整的棋
盘，我们只需要把现有的这一组渐变重复一份，从而创建出另一组正方形，
图 2-48
并且偏移它们的定位值。这有点像我们在波点图案中所用到的技巧：
两层三角形图案组合之后的效果
background: #eee;
background-image:
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0),
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
background-position: 0 0, 15px 15px,
15px 15px, 30px 30px;
图 2-49 background-size: 30px 30px;
这两组三角形终于拼合成了一组
四周留有空隙的正方形图案；我 最终结果就是一幅棋盘图案，正如图 2-44 所示。其实这段代码还可以
们用虚线框标出了两个贴片的位 稍稍优化，比如我们可以把这些处在贴片顶角的三角形两两组合起来（即把
置，其中第二层渐变还特意用深 第一组和第二组合并为一层渐变，把第三组和第四组合并为一层渐变），然
色凸显出来
后还可以把深灰色改成半透明的黑色——这样我们只需要修改底色就可以改
变整个棋盘的色调，不需要单独调整各层渐变的色标了：

background: #eee;
background-image:

38 第 2 章 背景与边框

඀ࠡ JOEC