能被 gradient 直接替代的是本质由颜色过渡、重复条纹、同心圆、对称几何结构构成的切图，如按钮渐变背景、骨架屏色块、斑马纹表格、卡片内阴影、斜向网格底纹；因其无需资源加载、缩放无损、支持css变量和高压缩率，比 background-image 更稳定高效。
能替代，但必须分清场景：简单几何图形、规则纹理、渐变色块可直接用 linear-gradient 或 radial-gradient 一步替换；复杂图标、带细节的插画、照片级元素仍需图片或 SVG。
哪些切图能被 gradient 直接干掉？
不是所有切图都适合被渐变替代。真正能被 linear-gradient 和 radial-gradient 安全替换的，是那些本质由「颜色过渡」「重复条纹」「同心圆」「对称几何结构」构成的资源：
- 按钮背景（如蓝→紫垂直渐变）、悬停态高光条
- 加载骨架屏中的模拟色块（用多层
linear-gradient模拟文字行+头像） - 斑马纹表格背景（
repeating-linear-gradient配合 2px/4px 色标） - 圆角卡片内阴影（
radial-gradient在伪元素上模拟柔和暗角） - 斜向网格底纹（
linear-gradient(45deg, #000 25%, transparent 25%), linear-gradient(-45deg, #000 25%, transparent 25%)叠加）
这些都不需要额外请求，改几行 CSS 就生效，且缩放无损。
为什么用 gradient 比 background-image 更稳？
关键在「渲染时机」和「分辨率无关性」：
-
background-image: url(...)是资源加载型，失败时留空白或触发 fallback 逻辑；linear-gradient是计算型，只要 CSS 解析成功，图形必出 - 渐变是矢量生成，
100% zoom或DPR=3下依然锐利；而切图若没配 @2x/@3x + 媒体查询，高密度屏上必然模糊 - 渐变可被 CSS Custom Properties 控制：
background: linear-gradient(var(--primary), var(--secondary))，主题切换无需 JS 干预 - Gzip 后渐变声明通常
repeating-linear-gradient 实现条纹时的三个坑
这是最常被误用的函数之一，写错就变成“看不见”或“错位”：
- 色标单位必须一致：不能混用
px和%，例如repeating-linear-gradient(90deg, #fff, #fff 10px, #000 10px, #000 20px)—— 所有值都用px，否则浏览器解析失败退为纯色 - 重复周期 = 最后一个色标位置（这里是
20px），若写成#fff 0, #fff 10px, #000 10px, #000 19px，周期变成19px，下一行会错位 - 不要依赖
background-size微调间距：它只缩放整个重复单元，易导致像素级模糊；应直接改色标数值，比如从10px改为12px
gradient 替代不了切图的硬边界
有些需求看似能“画出来”，实则代价远超收益：
- 带锯齿/手绘感的图标（如波浪线箭头、不规则云朵）——
clip-path+radial-gradient组合极难维护，不如 SVG - 文字阴影叠加多层发光（如霓虹灯效果）——
text-shadow层数一多就卡顿，filter: drop-shadow()兼容性又差 - 需要 alpha 通道精细控制的半透蒙版（如毛玻璃遮罩）——
backdrop-filter仍是实验性属性，iOS Safari 旧版本不支持 - 设计师给的「渐变色不规则噪点底纹」——CSS 无法生成真随机噪点，用
url(data:image/png;base64,...)内联反而更轻量
真正省请求的前提，是图形足够规则、可参数化。一旦开始用 calc() 套三层 radial-gradient 拼一个按钮高光，就该停下来想：这张图是不是该交给设计师重出 SVG？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
