linear-gradient()语法极严格，方向/角度必填、逗号空格需精准、停点位置须显式声明、透明色需fallback、CSS变量不可直接使用，否则渐变失效仅显示后备色。
linear-gradient 语法写错就完全不生效
浏览器对 linear-gradient() 的语法非常严格，少个逗号、多个多余空格、方向关键词拼错（比如写成 "top" 而不是 "to top"），都会导致整个声明被忽略——你看到的只是后备色，连报错都不会有。
常见错误现象：CSS里写了渐变，但页面显示纯色；开发者工具里该属性被划掉（invalid value）；用 Safari 打开时渐变消失（它对语法更敏感）。
-
linear-gradient()第一个参数必须是方向或角度，不能省略。写成linear-gradient(red, blue)在旧版 Chrome 可能侥幸工作，但不符合规范，现代浏览器（尤其 Firefox 100+）会直接拒收 - 方向推荐统一用
to top/to bottom/to right/to left，比top这类旧语法兼容性更好，也更易读 - 角度单位必须带
deg，90deg正确，90错误；turn和rad虽然合法，但极少用，容易混淆 - 颜色停止点（color stop）之间用逗号分隔，但每个停止点内部不能有多余空格，比如
red 0%, blue 100%没问题，red 0% , blue 100%（逗号前有空格）在部分解析器中可能出问题
多色停点位置没设准，视觉效果就“偏移”了
渐变不是均匀混合，颜色过渡由每个 color stop 的位置决定。默认情况下浏览器会自动均分，但一旦你漏写某个停点的位置，后续所有停点都会被重新计算，结果常和预期差很远。
使用场景：做按钮悬停渐变、卡片阴影过渡、或者模拟真实光照方向时，停点位置微调 5% 就会让质感明显不同。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖默认停点：显式写出所有关键位置，比如
linear-gradient(to right, #ff6b6b 0%, #4ecdc4 50%, #44b3a2 100%)，避免只写#ff6b6b, #4ecdc4, #44b3a2 - 停点可以重叠，比如
#ff6b6b 20%, #ff6b6b 30%能做出硬边过渡，这在模拟高光/阴影边界时很实用 - 百分比值超出
0%–100%是允许的（比如-10%或110%），用于延长某段颜色区域，但要注意在缩放或响应式布局下可能被裁切
透明度和 fallback 色不配，渐变在旧浏览器里直接“消失”
带 rgba() 或 hsla() 的渐变，在 IE11 或某些安卓 WebView 里会整个失效，而不是降级为半透明——它会退回到父元素背景色，造成视觉断裂。
性能影响不大，但兼容性坑极深：你以为加了透明只是让颜色柔和些，实际可能让整块 UI 在部分设备上变成不可见。
- 必须提供不带透明的 fallback：在
background声明里把纯色写在linear-gradient()前面，比如background: #4ecdc4; background: linear-gradient(to right, rgba(255,107,107,0.8), rgba(78,205,196,0.8)); - 避免在渐变里混用
transparent和rgba(0,0,0,0)，二者渲染表现不一致；优先用rgba()并确保 fallback 色与之视觉协调 - CSS 自定义属性（
--color）不能直接用在linear-gradient()里（除非配合env()或 JS 注入），否则变量不生效，fallback 也会失效
background-size 配合渐变时尺寸逻辑容易反直觉
background-size 控制的是渐变“图案”的重复单元大小，不是颜色带宽。设成 200% 200% 不会让颜色拉伸两倍，而是让整个渐变图样放大两倍——结果常是只显示左上角一小块，其余全是重复边缘色。
使用场景：做细腻纹理（如噪点渐变）、斜向条纹、或控制高光区域范围时，background-size 和 background-position 必须联动调整。
- 单色线性渐变一般不用设
background-size；需要精细控制时，优先用background-size: 100% 100%确保填满容器 - 做斜向条纹（如
linear-gradient(45deg, #fff 25%, transparent 25%)）时，background-size决定条纹粗细，10px 10px比20px 20px条纹密一倍 - 如果用了
background-repeat: no-repeat，再设大background-size会导致渐变只覆盖局部，记得同步调background-position把关键区域“摆正”
最麻烦的其实是调试：渐变本身没有边框、不占 layout、也不触发 :hover 伪类高亮，你得靠临时加 outline: 1px solid red 或改 background-color 才能看出它到底画在哪——这点没人提醒，但每天都在浪费时间。
