Page 61 - css揭秘

#fb3 50%, #58a 0);
background-size: 30px 30px;

1①
可以发现，这个办法行不通。原因在于我们只是把每个“贴片” 内部的
渐变旋转了 45°，而不是把整个重复的背景都旋转了。试着回忆一下我们以
前用位图来生成斜向条纹时是怎么做的吧，做法类似图 2-30。单个贴片包
图 2-30 含了四条条纹，而不是两条，只有这样才有可能做到无缝拼接。它正是我们
只有这种可以无缝拼接的图像才 需要在 CSS 代码中重新实现的贴片，因此我们需要增加一些色标：
能生成斜向条纹；是不是很眼熟
background: linear-gradient(45deg,
#fb3 25%, #58a 0, #58a 50%,
#fb3 0, #fb3 75%, #58a 0);
background-size: 30px 30px;

我们可以在图 2-31 中看到结果。如你所见，我们成功地创建了斜向条
纹，但这些条纹看起来要比我们在前面制作的水平和垂直条纹细一些。为了
图 2-31 理解这其中的道理，我们需要再次回忆起在学校里学过的勾股定理，用它来
我们得到的 45°条纹；图中的虚 计算直角三角形的斜边长度。这个定理表示，当 a 和 b 是直角三角形的直角
线框标示出了单个贴片的位置 2 2
边时，则斜边的长度等于 a + b 。对于一个 45°的直角三角形来说，它的
两条直角边是等长的，因此这个算式会变成 2a = a 2 。在我们的斜向条纹
中，背景尺寸指定的长度值决定了直角三角形的斜边长度，但条纹的宽度实
际上是直角三角形的高。在图 2-32 中可以看到图形化的解释。

这意味着，如果想让条纹的宽度变化为我们原本想要的 15px，就需要
把 background-size 指定为 2152× ≈ 42.426 406 871 像素：

图 2-32 background: linear-gradient(45deg,
背景尺寸设置为 30px 时，产生的条 #fb3 25%, #58a 0, #58a 50%,
15 #fb3 0, #fb3 75%, #58a 0);
纹宽度将是 ≈ 10.606 601 718
2 background-size: 42.426406871px 42.426406871px;
像素
你可以在图 2-33 中看到最终效果。但是，除非有人拿枪顶着你的脑袋
威胁你必须把斜向条纹的宽度设置为完全精确的 15 像素，我会强烈推荐你
把这一长串数字取整，写成 42.4px，或者甚至是 42px。（当然，在上述情
形之下，你还是会被干掉。因为 2 不是整数，我们最终得到的条纹宽度永
远都只能是一个近似值——尽管它已经相当精确了。）
图 2-33
我们最终得到的 45°条纹；请注 试一试 play.csssecrets.io/diagonal-stripes
意现在条纹的宽度跟前面的例子
是一样的
更好的斜向条纹

在前面的段落中展示的方法还不够灵活。假设我们想让条纹不是 45°而

① 原文 tile，表示平铺图案中的每个基本单元。——译者注

30 第 2 章 背景与边框

඀ࠡ JOEC