css线性渐变

作者：冷言寡语发布日期:2025-04-05 浏览:126

/* 线性渐变示例 */

/* 从上到下（默认）的线性渐变 */
background: linear-gradient(to bottom, red, blue);

/* 从左到右的线性渐变 */
background: linear-gradient(to right, red, blue);

/* 带有角度的线性渐变 */
background: linear-gradient(45deg, red, blue);

/* 多颜色的线性渐变 */
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

/* 渐变带有透明度 */
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));

/* 解释说明：
- `linear-gradient` 函数用于创建一个线性渐变。
- `to bottom`、`to right` 等参数指定渐变的方向。
- 角度参数（如 `45deg`）可以更精确地控制渐变的方向。
- 可以添加多个颜色停止点来创建多色渐变。
- 使用 `rgba` 可以为颜色添加透明度。
*/

上一篇：css media

下一篇：css3 动画