CSS中linear-gradient 的用法

linear-gradient 是 CSS 渐变背景 的一种写法，用于生成沿着直线方向的颜色过渡效果。它常和 background 或 background-image 属性一起使用。

基本语法

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

• direction（方向）：可以是角度（如 45deg）、关键字（如 to right, to bottom 等）。
• color-stop（颜色停靠点）：颜色值，可以指定位置（百分比或长度），决定渐变分布。

方向写法

1. 默认（从上到下）

   background: linear-gradient(red, blue);
   

   → 从上方的红色过渡到底部的蓝色。

2. 使用关键字

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

   → 从左到右渐变。

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

   → 从左上到右下渐变。

3. 使用角度

   background: linear-gradient(45deg, red, blue);
   

   → 沿 45° 方向渐变。

颜色停靠点

你可以通过百分比或长度控制颜色分布：

background: linear-gradient(to right, red 0%, yellow 50%, green 100%);

• 0%：最左侧是红色
• 50%：中间是黄色
• 100%：最右侧是绿色

重复渐变

使用 repeating-linear-gradient 可以创建重复的渐变：

background: repeating-linear-gradient(45deg, red 0, red 10px, blue 10px, blue 20px);

→ 形成条纹效果。

常见应用

1. 按钮背景

   button {background: linear-gradient(to right, #ff7e5f, #feb47b);border: none;padding: 10px 20px;color: white;border-radius: 8px;
   }
   

2. 渐变分隔线

   hr {border: 0;height: 3px;background: linear-gradient(to right, transparent, #333, transparent);
   }