Page 67 - css揭秘

需修改一到两个值。
„ 代码很简短，只有四行，共计 170 字节。SVG 的代码不见得会比它
更短。
我们甚至可以把两幅不同线宽、不同颜色的网格图案叠加起来，得到一
个更加逼真的蓝图网格（参见图 2-41）：
图 2-40
一幅简单的蓝图网格图案。不管 background: #58a;
每个格子有多大，它的线条始终 background-image:
linear-gradient(white 2px, transparent 0),
是 1px
linear-gradient(90deg, white 2px, transparent 0),
linear-gradient(hsla(0,0%,100%,.3) 1px,
小提示 transparent 0),
linear-gradient(90deg, hsla(0,0%,100%,.3) 1px,
transparent 0);
如果要统计你的 CSS 代码
background-size: 75px 75px, 75px 75px,
的文件体积，可以把代码粘贴到
15px 15px, 15px 15px;
bytesizematters.com。
试一试 play.csssecrets.io/blueprint

波点

目前为止，我们一直在用线性渐变生成图案。但是，径向渐变同样也是
图 2-41 非常实用的，因为它允许我们创建圆形、椭圆，或是它们的一部分。径向渐
一个更加复杂的蓝图网格，由两 变能够创建的最简单的图案是圆点的阵列（参见图 2-42）：
幅不同参数的网格图案组成
background: #655;
background-image: radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;

坦白地说，目前的这个样子还不是很实用。别着急，我们可以生成两层
圆点阵列图案，并把它们的背景定位错开，这样就可以得到真正的波点图案
了（参见图 2-43）：

background: #655;
图 2-42 background-image: radial-gradient(tan 30%, transparent 0),
圆点阵列；单个贴片用虚线框标示 radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;

试一试 play.csssecrets.io/polka

请注意，为了达到效果，第二层背景的偏移定位值必须是贴片宽高的一
半。不幸的是，这意味着如果要改动贴片的尺寸，需要修改四处。虽然可能
图 2-43 还没到不可收拾的地步，但这样的代码就快要跌入不可维护的深渊。如果你
波点图案；两层背景图案各自的 在使用预处理器，就赶紧把它转换成这个 mixin 吧：
贴片分别用虚线框标示

36 第 2 章 背景与边框

඀ࠡ JOEC