CSS 水平线性渐变

介绍

CSS 水平线性渐变是指在水平方向上，从左到右渐变的效果。它可以为网页添加一种渲染效果，使得网页更加美观。

语法

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

• to right 表示渐变方向为从左到右，可以根据需要进行调整；
• color-stop1 和 color-stop2 表示渐变的起始和终止颜色值，可以设置多个，用逗号隔开。

示例代码

.gradient {
  background: linear-gradient(to right, #00ffff, #ff00ff);
}

效果如下：

注意事项

• 渐变颜色值可以使用十六进制颜色值、RGB、RGBA、HSL 和 HSLA 等颜色格式；
• 可以在渐变颜色之间添加百分比，表示各颜色出现的频率；
• 使用多个颜色值时，区间之间如果没有添加百分比，则会平均分布。
• CSS 水平线性渐变也可以与其他 CSS 样式一起使用，如下：

.gradient {
  background: linear-gradient(to right, #00ffff, #ff00ff);
  height: 100px;
  width: 100%;
  border: 1px solid #000000;
}

结束语

CSS 水平线性渐变是为网页添加一种渲染效果的好方法。可以根据需要来设定不同的方向和颜色组合，从而实现不同的效果。