渐变

背景渐变

背景渐变（background gradient）

类型	函数	示例
线性渐变	linear-gradient()	颜色沿直线方向渐变
径向渐变	radial-gradient()	从中心向四周发散渐变

linear-gradient

线性渐变

基本语法：

background: linear-gradient(direction, color1, color2, ...);

• direction：支持to+方位词或角度（deg），表示渐变的方向
• color：表示变化前的颜色和变化后的颜色

提示

0deg从钟的0点开始

示例：

/* 从上到下 */
background: linear-gradient(to bottom, #4facfe, #00f2fe);

/* 从左到右 */
background: linear-gradient(to right, #ff9966, #ff5e62);

/* 斜向 */
background: linear-gradient(45deg, #84fab0, #8fd3f4);

/* 三色渐变 */
background: linear-gradient(to right, #ff9a9e, #fad0c4, #fad0c4);

radial-gradient

径向渐变

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

文字渐变

文字本身不能直接设置渐变颜色，但可以：

1. 给文字所在元素设置 背景渐变。
2. 用 background-clip: text 把背景裁剪到文字区域。
3. 设置文字颜色透明，让背景显示出来。

.gradient-text {
  background: linear-gradient(90deg, #ff6a00, #ee0979); /* 渐变背景 */
  background-clip: text; /* 背景裁剪到文字（Webkit 浏览器） */
  text-fill-color: transparent; /* 文字颜色透明 */
}