CSS中background-image结合gradient可创建颜色过渡效果。1. 线性渐变（linear-gradient）沿指定方向平滑过渡，如to right实现红到黄；2. 径向渐变（radial-gradient）从中心点向外扩散，支持圆形或椭圆，如circle yellow到green；3. 重复渐变（repeating-linear/radial-gradient）生成条纹或同心圆等周期性图案；4. 渐变可与图片叠加，如linear-gradient半透明层覆盖背景图，配合background-size: cover实现完整填充。掌握这些技术可用纯CSS构建按钮、卡片阴影和纹理背景等视觉效果。
在CSS中，background-image 结合 gradient 可以为元素创建平滑的颜色过渡效果，无需使用图片。常用的渐变类型有线性渐变（linear-gradient）、径向渐变（radial-gradient）和重复渐变等。
1. 线性渐变（linear-gradient）
线性渐变沿着一个方向进行颜色过渡。
语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
-
background-image: linear-gradient(to right, red, yellow);— 从左到右红变黄 -
background-image: linear-gradient(45deg, blue, white);— 45度角蓝变白 -
background-image: linear-gradient(to bottom right, #ff0000, #00ff00, #0000ff);— 多色对角渐变
2. 径向渐变（radial-gradient）
径向渐变从一个中心点向外扩散，形状可以是圆形或椭圆。
立即学习“前端免费学习笔记（深入）”；
background-image: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
-
background-image: radial-gradient(circle, yellow, green);— 圆形黄绿渐变 -
background-image: radial-gradient(at top left, #f00, #00f);— 从左上角开始的红到蓝 -
background-image: radial-gradient(ellipse farthest-corner, rgba(255,0,0,0), rgba(255,0,0,1));— 椭圆透明到红
3. 重复渐变（repeating-gradient）
用于创建周期性重复的渐变图案。
示例：-
background-image: repeating-linear-gradient(45deg, red 0px, red 10px, white 10px, white 20px);— 生成条纹背景 -
background-image: repeating-radial-gradient(circle, #fff, #000 10px, #fff 20px);— 同心圆环效果
4. 渐变与其他背景结合
你可以将渐变和其他背景图像叠加，或配合其他属性使用。
示例：-
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('bg.jpg');— 半透明遮罩层+图片 -
background-size: cover;配合使用可确保背景填充整个元素
