Web前端入门第 32 问：CSS background 元素渐变背景用法全解

渐变背景在 CSS 里面就是一个颜色到另一个颜色渐渐变化的样子。
本文示例中，盒子基础样式：

1. .box {
2.   margin: 20px;
3.   padding: 20px;
4.   border: 10px dashed rgba(0,255,0,1);
5.   width: 250px;
6.   height: 180px;
7. }

复制代码

渐变背景分类

三种基础渐变：

• 线性渐变 linear-gradient
  
• 径向渐变 radial-gradient
  
• 锥形渐变 conic-gradient
  

三种重复渐变：

• 重复线性渐变 repeating-linear-gradient
  
• 重复径向渐变 repeating-radial-gradient
  
• 重复锥形渐变 repeating-conic-gradient
  

线性渐变使用

完整语法：

1.   linear-gradient( [  | to <side-or-corner> ]? , <color-stop-list> )  
3.   angle: 渐变角度
4.   side-or-corner: 渐变线的起始点位置
5.   color-stop-list: 渐变颜色列表

复制代码

默认为垂直方向渐变，如下：

1.   background: linear-gradient(#ff4757, rgb(221, 255, 0));

复制代码

可通过参数调整渐变方向，如下将渐变方向调整为 70 度：

1.   background:
2.     linear-gradient(70deg, #ff4757, rgb(221, 255, 0));

复制代码

也可通过关键字控制渐变方向，如下将渐变方向调整为从右下到左上：

1.   background:
2.     linear-gradient(to left top, #ff4757, rgb(221, 255, 0));

复制代码

多种颜色渐变，可在颜色后面添加百分比（也可以是固定像素值，比如 200px）控制颜色位置：

1.   background:
2.     linear-gradient(
3.       to left top,
4.       #ff4757,
5.       rgb(221, 255, 0) 30%,
6.       rgb(200, 0, 255) 200px,
7.       rgb(0, 186, 40)
8.     );

复制代码

也可以使用两个百分比（或其他 CSS 识别的单位，如 px em 等）固定颜色占用区块，实现多个色块拼接效果：

1.   background:
2.     linear-gradient(
3.       to right,
4.       #ff4757 20%,
5.       rgb(221, 255, 0) 20% 40%,
6.       rgb(98, 0, 255) 40% 60%,
7.       rgb(0, 186, 40)  60% 80%,
8.       rgb(255, 0, 0) 80% 100%
9.     );

复制代码

可设置多个线性渐变形成堆叠效果：

1.   background:
2.     linear-gradient(217deg, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0) 80%),
3.     linear-gradient(127deg, rgba(0, 255, 0, 0.5), rgba(0, 255, 0, 0) 80%),
4.     linear-gradient(336deg, rgba(0, 0, 255, 0.5), rgba(0, 0, 255, 0) 80%);

复制代码

径向渐变使用

完整语法：

1.   radial-gradient( [ [ <radial-shape> || <radial-size> ] || at <position> ] , <color-stop-list> )  
3.   radial-shape: circle(圆形) 或 ellipse(椭圆)
4.   radial-size: 渐变结束形状的大小，包含四个关键字（closest-side/closest-corner/farthest-side/farthest-corner）
5.   position: 圆心位置
6.   color-stop-list: 渐变颜色列表

复制代码

默认的径向渐变从中心向外扩散，如下：

1.   background:
2.     radial-gradient(
3.       #ff4757, rgb(221, 255, 0)
4.     );

复制代码

可通过参数调整圆心位置，如下将圆心位置调整为左上角：

1.   background:
2.     radial-gradient(
3.       at left top,
4.       #ff4757, rgb(221, 255, 0)
5.     );

复制代码

通过调整 radial-size 控制径向渐变结束形状的大小，如下不同值之间的区别：

1.   background:
2.     radial-gradient(
3.       ellipse closest-side at 30% 40%,
4.       #ff4757,
5.       rgb(221, 255, 0)
6.     );

复制代码

也可设置多个径向渐变形成堆叠效果：

1.   background:
2.     radial-gradient(circle at 50% 0, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0) 80%),
3.     radial-gradient(circle at 6.7% 75%, rgba(0, 0, 255, 0.5), rgba(0, 0, 255, 0) 80%),
4.     radial-gradient(circle at 93.3% 75%, rgba(0, 255, 0, 0.5), rgba(0, 255, 0, 0) 80%);

复制代码

锥形渐变使用

完整语法：

1.   conic-gradient( [ [ [ from  ]? [ at <position> ]? ] || <color-interpolation-method> ]? ,  )  
3.   angle: 旋转角度
4.   position: 圆心位置
5.   color-interpolation-method: 色彩空间，2023版本新增数据类型，参考文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/color-interpolation-method
6.   angular-color-stop-list: 渐变颜色列表

复制代码

默认的锥形渐变围绕一个中心点旋转，如下：

1.   background:
2.     conic-gradient(
3.       #ff4757,
4.       rgb(221, 255, 0)
5.     );

复制代码

可通过参数改变起始角度和圆形位置，如下：

1.   background:
2.     conic-gradient(
3.       from 45deg at 30% 40%,
4.       #ff4757,
5.       rgb(221, 255, 0)
6.     )

复制代码

也可通过控制色块区域绘制一个饼状图，如下：

1.   width: 180px;
2.   height: 180px;
3.   border-radius: 180px;
4.   background:
5.     conic-gradient(
6.       from 45deg,
7.       #ff4757 30%,
8.       rgb(221, 255, 0) 30% 70%,
9.       rgb(98, 0, 255) 70% 100%
10.     )

复制代码

使用锥形渐变可模拟 PhotoShop 的马赛克背景效果：

1.   background: conic-gradient(
2.       #fff 0.25turn,
3.       #C8C8C8 0.25turn 0.5turn,
4.       #fff 0.5turn 0.75turn,
5.       #C8C8C8 0.75turn
6.     )
7.     top left / 20px 20px repeat;

复制代码

也可设置多个锥形渐变形成堆叠效果：

1.   background:
2.     conic-gradient(from 45deg at 30% 40%, rgba(221, 255, 0,0) , rgba(98, 0, 255,0.5)),
3.     conic-gradient(from 45deg at 80% 40%,  #ff4757 30%, rgba(221, 255, 0,0.1), rgba(98, 0, 255,0.5))

复制代码

重复线性渐变

语法与线性渐变相同，在线性渐变基础上，多了一层重复操作，其效果如下：

1.   background: repeating-linear-gradient(
2.     from 45deg at 50% 50%,
3.     #ff4757 0deg 10deg,
4.     rgb(221, 255, 0) 10deg 20deg,
5.     rgb(98, 0, 255) 20deg 30deg
6.   );

复制代码

重复径向渐变

语法与径向渐变相同，在径向渐变基础上，多了一层重复操作，其效果如下：

1.   background: repeating-linear-gradient(
2.     45deg,
3.     #ff4757 0px 10px,
4.     rgb(221, 255, 0) 10px 20px,
5.     rgb(98, 0, 255) 20px 30px
6.   );

复制代码

重复锥形渐变

语法与锥形渐变相同，在锥形渐变基础上，多了一层重复操作，其效果如下：

1.   background: repeating-conic-gradient(
2.     from 45deg at 50% 50%,
3.     #ff4757 0deg 10deg,
4.     rgb(221, 255, 0) 10deg 20deg,
5.     rgb(98, 0, 255) 20deg 30deg
6.   );

复制代码

总结

在使用 CSS 渐变时，需注意浏览器兼容性，部分新语法可能在稍低版本浏览器中不支持。
渐变的使用不止于此，可以发挥想象力，实现更多炫酷效果。
参考资料：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！