Published 2022-05-19

css - Gradient

CSS Gradient 是一种用于在 HTML 元素上创建渐变色的 CSS 属性。使用 CSS Gradient,您可以创建平滑的色彩过渡,从一个颜色渐变到另一个颜色。您可以在背景、边框和文本中使用 CSS Gradient 属性来创建视觉效果。

CSS Gradient 属性由起点和终点颜色组成,并可以定义渐变的方向和类型。以下是 CSS Gradient 属性的语法:

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

其中:

例如,以下 CSS 代码将在页面中创建一个从红色渐变到蓝色的水平渐变:

background: linear-gradient(to right, red, blue);

您还可以使用 CSS Gradient 属性来创建径向渐变、重复渐变和透明渐变等效果。以下是一个创建径向渐变的示例:

background: radial-gradient(circle, yellow, green);

此代码将在页面中创建一个以圆形为基础的径向渐变,从黄色渐变到绿色。