css渐变怎么设置

百变鹏仔 4个月前 (09-19) #CSS

文章标签 css

在 css 中设置渐变背景的方法：使用 linear-gradient() 函数创建线性渐变，沿指定方向在颜色之间平滑过渡。使用 radial-gradient() 函数创建径向渐变，从中心向外平滑过渡。

如何在 CSS 中设置渐变

要在 CSS 中创建渐变背景，可以使用 linear-gradient() 或 radial-gradient() 函数。

线性渐变

线性渐变沿指定方向在两个或更多颜色之间创建平滑过渡。语法如下：

立即学习“前端免费学习笔记（深入）”；

linear-gradient(direction, color1, color2, ...);

示例：

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

这将创建一个从红色渐变到黄色再渐变到绿色的水平渐变。

径向渐变

径向渐变从中心向外创建平滑过渡。语法如下：

radial-gradient(shape, size, color1, color2, ...);

示例：

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

这将创建一个从红色渐变到黄色再渐变到绿色的圆形渐变。

其他参数

渐变函数还可以接受其他参数来控制渐变的行为：

示例：

background: linear-gradient(  to right,  red 0%,  yellow 50%,  green 100%);

这将创建一个从红色渐变到黄色再渐变到绿色的水平渐变，其中黄色出现在渐变的一半。

文章推荐