颜色渐变 - CSS

CSS中的颜色渐变是一种美观且常用的设计技巧，可以让网页更加生动。本文介绍如何使用CSS实现颜色渐变。

线性渐变

CSS中的线性渐变可以通过 linear-gradient() 函数实现。该函数需要指定起点、终点以及颜色值，并返回生成的渐变背景。

语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

其中，direction 指定渐变方向，可选值有：to top、to bottom、to left、to right、to top right、to bottom right、to bottom left、to top left。例如：

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

以上代码表示从左到右生成一个从红色到黄色的线性渐变。

color-stop 表示渐变停止点，必须使用颜色值来指定。为了实现更复杂的渐变效果，可以指定多个 color-stop。

示例

以下代码实现了一个从红色到黄色再到绿色的线性渐变：

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

生成效果如下：

径向渐变

CSS中的径向渐变可以通过 radial-gradient() 函数实现。该函数需要指定中心点、起点和终点的半径、颜色值等参数，并返回生成的渐变背景。

语法

background: radial-gradient(shape size at position, start-color, ..., last-color);

其中，shape 表示渐变形状，可选值有：ellipse（椭圆形，默认值）和 circle（圆形）。size 表示渐变尺寸，可选值有：closest-side、closest-corner、farthest-side、farthest-corner。

at position 表示渐变中心点位置，可以使用像素、百分比、关键字（center、top、bottom、left、right）等方式指定。

start-color 和 last-color 表示渐变的起点和终点颜色值，中间可以使用多个 color-stop 定义更复杂的渐变效果。

示例

以下代码实现了一个从中心向周围扩散的径向渐变：

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

生成效果如下：

两种渐变结合

可以将线性渐变和径向渐变结合起来使用，实现更加复杂且炫酷的渐变效果。

例如，以下代码实现了从中心向周围扩散的径向渐变，再从左上角向右下角呈45度倾斜的方向生成一条从红色到绿色的线性渐变：

background: radial-gradient(circle, red, green), linear-gradient(to bottom right, red, green);

生成效果如下：

以上就是CSS中的渐变效果的简单介绍。渐变可以让网页更加生动，让你的设计更有个性。