css 线性渐变

作者：叶随雨落发布日期:2025-06-09 浏览:34

/* 线性渐变的基本语法 */
background: linear-gradient(direction, color-stop1, color-stop2);

/* 示例 1: 从上到下的线性渐变 */
background: linear-gradient(to bottom, red, blue);
/* 解释：背景颜色从红色逐渐过渡到蓝色，方向是从上到下 */

/* 示例 2: 从左到右的线性渐变 */
background: linear-gradient(to right, yellow, green);
/* 解释：背景颜色从黄色逐渐过渡到绿色，方向是从左到右 */

/* 示例 3: 带有角度的线性渐变 */
background: linear-gradient(45deg, pink, purple);
/* 解释：背景颜色从粉色逐渐过渡到紫色，方向是45度角 */

/* 示例 4: 多个颜色停止点的线性渐变 */
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
/* 解释：背景颜色从红色逐渐过渡到紫色，经过多个颜色停止点，方向是从左到右 */

上一篇：css隐藏元素

下一篇：css选择器优先级