[CSS]CSS3 渐变（Gradients）

作者：System 时间：2024年08月13日分类：所有,css3 字数：490

CSS3 渐变是创建在两种或多种指定颜色之间显示平滑过渡的可能性的一种方法。这些过渡可以是线性的也可以是径向的。

线性渐变：

语法：




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

示例：




div {
  background: linear-gradient(to right, red , yellow);
}

径向渐变：

语法：




background: radial-gradient(shape size at position, start-color, ..., last-color);

示例：




div {
  background: radial-gradient(circle, red, yellow, green);
}

CSS3 渐变是创建视觉效果的强大工具，可以用于背景、按钮、文本、边框等。