平滑渐变的关键在于合理设置color-stop位置分布并避免硬边重叠；必须显式声明方向（如to bottom）、统一透明度格式、分开书写background-color与background-image，否则渐变会静默失效。
直接说结论：平滑渐变不是靠“多加颜色”实现的，而是靠合理控制 color-stop 的位置分布和避免硬边重叠。写错方向、漏逗号、混用透明度格式，都会让渐变彻底不显示。
linear-gradient() 必须显式写方向，不能省略
很多初学者写 linear-gradient(red, blue)，以为会默认从上到下——但旧版 Chrome、iOS 12 Safari、部分安卓 WebView 会直接忽略整个声明，背景变透明。浏览器对语法错误零容忍，不报错也不提示，只静默失效。
- 安全写法永远带
to bottom、to right或角度如180deg（注意单位deg不能丢） - 避免
0、90这种无单位数字；to right比90deg兼容性更好（iOS 12 不支持角度） - 生产环境建议双写：
background-image: -webkit-linear-gradient(to right, #f00, #00f); background-image: linear-gradient(to right, #f00, #00f);
color-stop 位置不写清楚，过渡就“不平滑”
不指定位置时，浏览器按顺序把颜色平均分配：比如 linear-gradient(to right, red, yellow, blue) 实际等价于 red 0%, yellow 50%, blue 100%。中间黄色只占一半宽度，视觉上极易被忽略，看起来像红→蓝突变。
- 想让黄色明显，就手动设宽：例如
red 0%, yellow 30%, blue 100% - 两个相邻 stop 位置相同时（如
red 20%, red 20%），会产生硬边；间隔太小（如red 20%, blue 20.05%）在高 DPI 屏可能渲染出噪点 - 百分比基于容器宽高计算（非渐变长度），所以
red 50px在不同尺寸容器里效果不一致，慎用像素单位
透明度混用会导致 Safari 或安卓 WebView 渲染异常
同一组渐变中，所有颜色的 alpha 表达方式必须统一。比如不能一半写 rgba(255,0,0,0.5)，一半写 #ff000080——虽然都表示半透红，但 Firefox 旧版本会忽略后者，微信内置 WebView 可能解析失败。
- 推荐全用 8 位十六进制（如
#ff000080）或全用rgba()，别混搭 -
transparent是个陷阱：它本质是rgba(0,0,0,0)，但在部分安卓 WebView 中表现不稳定，建议显式写rgba(0,0,0,0) - 如果要用透明做叠加效果，底色必须用
background-color单独设置，并确保它写在background-image之前（层叠顺序：color 在下，image 在上）
background 简写会清空渐变，这是最常被忽略的坑
写了 background: #fff; 之后再写 background-image: linear-gradient(...); 是安全的；但反过来，或者用 background: #fff linear-gradient(...);，就会让渐变彻底消失——因为 background 简写会重置所有子属性，包括 background-image: none。
- 稳妥做法：始终分开写
background-color和background-image - 如果非要简写，必须把渐变放最前：
background: linear-gradient(to right, #f00, #00f), #eee;（逗号后是 fallback 色） - 调试时可临时加
background-size: 200% 200%，看渐变是否真加载了——如果没反应，大概率是语法错误或被简写覆盖了
真正影响“平滑感”的，从来不是颜色数量，而是相邻 color-stop 之间有没有留出足够过渡空间、位置值有没有刻意对齐像素边界、以及是否在无意中制造了硬边。这些细节在设计稿里看不见，但在真实设备上一滚屏就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
