渐变

网页上到处都是从一种颜色平滑过渡到另一种颜色的图像。然而，CSS 3 允许您在设计中使用它们，而无需创建实际的图像文件。

没有特殊的属性来实现这一点；您只需使用 background 或 background-image 属性，并在其值中定义您的渐变。您可以通过这种方式创建 **线性** 和 **径向** 渐变。

线性渐变

要让两种颜色均匀分布，从顶部的一种颜色渐变到底部的另一种颜色，声明可以很简单，例如：


background: linear-gradient(yellow, red);

要调整渐变的渐变角度，您可以插入“to”和您希望过渡到达的目的地。您可以朝向一侧


background: linear-gradient(to right, orange, red);

或者一个角落


background: linear-gradient(to bottom right, orange, red);

或者任何您喜欢的角度


background: linear-gradient(20deg, orange, red);

为什么只用两种颜色呢？指定任意数量的颜色


background: linear-gradient(hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%));

为了让渐变在尽可能多的浏览器上工作，您可能还需要使用 -webkit-linear-gradient 来兼容 Safari 和早期版本的 Chrome。 **这些的值也必须排除“to”部分**，如果使用的话。

CSS 渐变在 IE 9 及更早版本中完全不起作用，但您仍然可以为它们以及任何其他不支持的浏览器制作渐变，通过指定传统方法的老式图像作为后备（后续声明将被忽略）。

所以，总而言之，您的渐变可能看起来像这样


body {
    background: #666 url(fade.png) 0 0 repeat-y;
    background: -webkit-linear-gradient(right, #000, #666); 
    background: linear-gradient(to right, #000, #666);
}

径向渐变

径向渐变，其中一种颜色从中心点开始，渐变到另一种颜色，使用类似的语法


background: radial-gradient(yellow, green);

您还可以指定渐变的形状。默认情况下，它是一个椭圆，会扩展以填充背景框，但您可以强制它变成圆形，无论框的形状如何


background: radial-gradient(circle, yellow, green);

使用“closest-side”、“closest-corner”、“farthest-side”和“farthest-corner”，您还可以指定渐变是包含在离原点最近或最远的框的边或角内


background: radial-gradient(circle closest-side, yellow, green);

如果您想将渐变的起点放在特定位置，您还可以使用“at”


background: radial-gradient(at top left, yellow, green);

更多兼容性说明：额外的 -webkit-radial-gradient 用法是明智的。这里参数的顺序需要改变，并且，就像“to”一样，“at”也被排除。所以


background: radial-gradient(circle closest-side at 100px 200px , black, white);

将伴随


background: -webkit-radial-gradient(100px 200px, circle closest-side, black, white);

颜色停止点

如果您不想要渐变中的均匀混合，您可以指定每种颜色在渐变中确切的开始位置，紧跟在每种颜色之后，从“0”开始到“100%”结束（尽管也可以使用长度）。

所以，在开始修改之前，为了清楚起见

linear-gradient(black 0, white 100%) 等同于 linear-gradient(black, white)
radial-gradient(#06c 0, #fc0 50%, #039 100%) 等同于 radial-gradient(#06c, #fc0, #039)
linear-gradient(red 0%, green 33.3%, blue 66.7%, black 100%) 的结果将与 linear-gradient(red, green, blue, black) 相同

这是因为，当这些示例中指定了位置时，它们会均匀地分布颜色，这在没有显式定义颜色停止点时是默认行为。

所以，继续修改，您可以使用这些停止点随意拉伸和调整


background: linear-gradient(135deg, hsl(36,100%,50%) 10%, hsl(72,100%,50%) 60%, white 90%);

重复渐变

使用前面的方法，单个渐变将填充一个框，但您可以使用“repeating-linear-gradient”和“repeating-linear-gradient”来构建颜色停止点，并，嗯，重复渐变。

例如，基本的黑白条纹


background: repeating-linear-gradient(white, black 15px, white 30px);

或者更扎实的


background: repeating-radial-gradient(black, black 15px, white 15px, white 30px);