CSS - 渐变：初学者的彩色之旅

你好，未来的 CSS 巫师们！今天，我们将要深入 CSS 渐变这个充满活力的世界。系好安全带，因为我们即将用颜色在网页上无缝流动来绘制。相信我，在这个教程结束时，你将能够创作出连毕加索都会嫉妒的颜色杰作！

CSS - Gradients

CSS 渐变是什么？

想象你在粉刷一堵墙，但你不是只用一种颜色，而是想让颜色从一种逐渐过渡到另一种。CSS 渐变就是这样做的，但是在你的网页上！这是一种在两种或更多颜色之间平滑过渡的方法，创建出美丽、引人注目的效果，而无需使用图像。

CSS 渐变的类型

在 CSS 颜色调色板中，我们有三种主要的渐变类型：

线性渐变
径向渐变
圆锥渐变

让我们逐一详细探索这些渐变类型，好吗？

线性渐变

线性渐变就像是从点 A 到点 B 的颜色直线变化。这是最常见且最容易理解的，所以让我们从这里开始。

.linear-gradient {
background: linear-gradient(to right, red, yellow);
}

在这个例子中，我们创建了一个从左到右的渐变，从红色开始，以黄色结束。简单吧？

但等等，还有更多！我们还可以使用角度指定方向：

.angled-gradient {
background: linear-gradient(45deg, blue, green);
}

这创建了一个从蓝色到绿色的对角渐变，角度为 45 度。

径向渐变

径向渐变就像圆形的彩虹，颜色从中心点向外辐射。

.radial-gradient {
background: radial-gradient(circle, red, yellow, green);
}

这创建了一个圆形渐变，从中心的红色开始，然后是黄色，最后在外围是绿色。

圆锥渐变

圆锥渐变是新的孩子。它们就像颜色轮，颜色围绕中心点旋转。

.conic-gradient {
background: conic-gradient(red, yellow, green, blue, red);
}

这创建了一个完整的颜色旋转，从红色开始，也以红色结束。

语法

现在，让我们分解这些渐变的语法：

渐变类型	基本语法
线性	`linear-gradient([方向,] 颜色1, 颜色2, ...)`
径向	`radial-gradient([形状大小在位置,] 颜色1, 颜色2, ...)`
圆锥	`conic-gradient([从角度,] 颜色1, 颜色2, ...)`

边框的渐变

你知道吗？你也可以为边框使用渐变？这就像给你的元素加了一条花哨的腰带！

.gradient-border {
border: 10px solid;
border-image: linear-gradient(to right, red, blue) 1;
}

这创建了一个从红色到蓝色的边框渐变。

定位颜色停止点

颜色停止点就像是渐变中的检查点。你可以精确地定位它们：

.color-stops {
background: linear-gradient(to right, red 20%, yellow 40%, green 60%, blue 80%);
}

这创建了一个具有特定颜色转换的渐变，分别在元素宽度的 20%、40%、60% 和 80% 处。

创建硬边线

想要突然的颜色变化而不是平滑过渡？只需为相邻的颜色停止点使用相同的百分比：

.hard-lines {
background: linear-gradient(to right, red 50%, blue 50%);
}

这会在中间创建一个红色和蓝色之间的硬边线。

使用渐变创建颜色带

你可以通过重复颜色停止点来创建颜色带：

.color-bands {
background: linear-gradient(to right, red 25%, yellow 25% 50%, green 50% 75%, blue 75%);
}

这创建了四个等宽的颜色带。

堆叠渐变

想要变得非常花哨？将多个渐变堆叠在彼此之上：

.stacked-gradients {
background:
linear-gradient(to right, rgba(255,0,0,0.5), rgba(255,0,0,0)),
linear-gradient(to bottom, rgba(0,0,255,0.5), rgba(0,0,255,0));
}

这创建了一个从左到右的红色渐变和从上到下的蓝色渐变，彼此重叠。

函数	描述
`repeating-linear-gradient()`	创建一个重复的线性渐变
`repeating-radial-gradient()`	创建一个重复的径向渐变
`repeating-conic-gradient()`	创建一个重复的圆锥渐变
`image()`	生成一个图像值
`image-set()`	允许你为不同的显示分辨率提供多个图像源