一文教你掌握 CSS 渐变属性linear-gradient、radial-gradient

作者：System 时间：2024年08月22日分类：所有,css 字数：592

这篇文章距离上次修改已过434天，其中的内容可能已经有所变动。

CSS 渐变属性 linear-gradient 和 radial-gradient 可以创建从一种颜色平滑过渡到另一种颜色的效果。

线性渐变（linear-gradient）：

语法：




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

示例代码：




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

径向渐变（radial-gradient）：

语法：




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

示例代码：




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

在这些示例中，div 元素将显示从左到右的红色到黄色的线性渐变，以及从中心向外的红色到黄色到绿色的径向渐变。