Page 59 - css揭秘
P. 59
background: linear-gradient(#fb3, #58a);
现在，让我们试着把这两个色标拉近一点（参见图 2-21）：
background: linear-gradient(#fb3 20%, #58a 80%);
图 2-22 现在容器顶部的 20% 区域被填充为 #fb3 实色，而底部 20% 区域被
渐变现在出现在总高的 20% 区 填充为 #58a 实色。真正的渐变只出现在容器 60% 的高度区域。如果我们
域，剩下的部分显示为实色；色 把两个色标继续拉近（分别改为 40% 和 60%，参见图 2-22），那真正的渐变
标的位置用虚线标示 区域就变得更窄了。你是不是开始好奇，如果我们把两个色标重合在一起，
会发生什么？
background: linear-gradient(#fb3 50%, #58a 50%);
“如果多个色标具有相同的位置，它们会产生一个无限小的过渡区域，
过渡的起止色分别是第一个和最后一个指定值。从效果上看，颜色会在那
图 2-23 个位置突然变化，而不是一个平滑的渐变过程。”
两个色标现在都设为 50% 了
——CSS 图像（第三版）（http://w3.org/TR/css3-images）
你在图 2-23 中可以看到，已经没有任何渐变效果了，只有两块实色，
各占据了 background-image 一半的面积。本质上，我们已经创建了两条巨
大的水平条纹。
因为渐变是一种由代码生成的图像，我们能像对待其他任何背景图像那
样对待它，而且还可以通过 background-size 来调整其尺寸：
图 2-24
background: linear-gradient(#fb3 50%, #58a 50%);
在没有平铺的情况下，我们生成
background-size: 100% 30px;
的背景是这样的
在图 2-24 中可以看到，我们把这两条条纹的高度都缩小到了 15px。由
于背景在默认情况下是重复平铺的，整个容器其实已经被填满了水平条纹
（参见图 2-25）。
我们还可以用相同的方法来创建不等宽的条纹，只需调整色标的位置值
即可（参见图 2-26）：
图 2-25 background: linear-gradient(#fb3 30%, #58a 30%);
background-size: 100% 30px;
最终的水平条纹效果
为了避免每次改动条纹宽度时都要修改两个数字，我们可以再次从规范
那里找到捷径。
“如果某个色标的位置值比整个列表中在它之前的色标的位置值都要
小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。”
——CSS 图像（第三版）（http://w3.org/TR/css3-images）
28 第 2 章 背景与边框
ࠡ JOEC
