css背景渐变色

作者：殘沫灕汐发布日期:2026-01-01 浏览:19

/* 线性渐变：从上到下，颜色从蓝色渐变到红色 */
background: linear-gradient(to bottom, blue, red);

/* 解释说明：
- `linear-gradient` 是 CSS 中用于创建线性渐变背景的函数。
- `to bottom` 表示渐变的方向是从上到下。
- `blue` 和 `red` 分别是渐变的起始颜色和结束颜色。
*/

/* 径向渐变：从中心向外扩散，颜色从白色渐变到黑色 */
background: radial-gradient(circle, white, black);

/* 解释说明：
- `radial-gradient` 是 CSS 中用于创建径向渐变背景的函数。
- `circle` 表示渐变的形状为圆形。
- `white` 和 `black` 分别是渐变的起始颜色和结束颜色。
*/

/* 多色线性渐变：从左到右，颜色从红色渐变到黄色再到绿色 */
background: linear-gradient(to right, red, yellow, green);

/* 解释说明：
- 这个例子展示了如何使用多个颜色进行线性渐变。
- `to right` 表示渐变的方向是从左到右。
- `red`, `yellow`, 和 `green` 分别是渐变的不同阶段的颜色。
*/

上一篇：css 边框渐变

下一篇：css靠右对齐