CSS | 线性梯度（linear-gradient）函数

线性梯度是 CSS 中用于创建渐变效果的一种方式。它允许你在两个或多个颜色之间创建一种平滑的过渡效果。

语法

linear-gradient() 函数的语法如下：

linear-gradient([<angle> | to <side-or-corner>], <color-stop> [, <color-stop>]+)

• <angle>: 渐变的方向，可以使用角度值(deg|grad|rad|turn)，值为正值表示顺时针方向，负值表示逆时针方向。例如，0deg 表示从上到下的渐变，90deg 表示从左到右的渐变。
• to <side-or-corner>: 渐变的方向，可以使用关键字（top、right、bottom、left、top left、top right、bottom left 或 bottom right）。例如，to right 表示从左到右的渐变效果。
• <color-stop>: 渐变的颜色位置和颜色值。颜色位置可以使用百分比（%）或像素（px）来定义。

示例

以下示例演示了如何使用 linear-gradient() 函数创建线性渐变效果：

/* 从上到下的渐变 */
background-image: linear-gradient(to bottom, blue, red);

/* 从左到右的渐变 */
background-image: linear-gradient(to right, green, yellow);

/* 对角线渐变 */
background-image: linear-gradient(to bottom right, pink, purple);

/* 自定义角度渐变 */
background-image: linear-gradient(45deg, orange, grey);

浏览器兼容性

线性梯度函数 linear-gradient() 在现代浏览器中得到了广泛支持，包括 Chrome、Firefox、Safari 和 Edge。

更多关于 linear-gradient() 函数的信息可以查阅 MDN Web 文档。