linear-gradient渐变不生效主因是漏方向关键词或单位；须显式声明to top等方向，颜色用合法值，慎用复合background属性，注意Safari兼容性及background-layer叠加顺序。
linear-gradient 基本写法错在哪？
写出来的渐变不生效，大概率是漏了单位或方向关键词。CSS 的 linear-gradient 不是“填颜色就行”，它默认从上到下（to bottom），但如果你只写 linear-gradient(red, blue)，在旧版 Safari 或某些 PostCSS 配置下可能被忽略——因为没显式声明方向，部分解析器会拒收。
- 必须带方向：用
to top、to right、45deg等，别裸写颜色列表 - 颜色值要合法：
#ff0、rgb(255, 0, 0)、hsl(0, 100%, 50%)都行，但red这类关键字在部分环境里兼容性略弱 - 渐变色标位置可省略，但加了更可控：比如
red 0%, #ff9900 50%, blue 100%
background-image 和 background-color 能一起用吗？
能，而且这是实现「渐变+半透明遮罩」「渐变+图片底纹」的正解。浏览器把 background-image 当作图层叠在 background-color 上方；但注意：background 复合属性会覆盖掉所有背景设置，一不留神就把渐变冲掉了。
- 推荐分开写：
background-color: #fff+background-image: linear-gradient(...) - 如果要用复合写法，得把渐变写进
background里，且background-color必须放在最后，否则会被覆盖 - 叠加图片时，顺序很重要：图片在下、渐变在上，就写成
background: url(...) no-repeat, linear-gradient(...)
Safari 里渐变突然变黑或失效？
老版本 Safari（尤其是 iOS 13 之前）对 linear-gradient 的语法容忍度低，常见两个坑：一是用了 to left top 这种双关键词方向（应改用 to top left 或角度），二是透明度写成 rgba(0,0,0,0.5) 却没加 -webkit- 前缀（虽然现代已基本不用前缀，但某些构建工具仍会剔除无前缀版本）。
- 方向统一用标准写法：
to bottom right，别写bottom right或right bottom - 如需最大兼容，可加一行
background-image: -webkit-linear-gradient(...)，内容与标准版一致 - 检查是否误用了
repeating-linear-gradient却没意识到它默认重复铺满——这会导致意料外的条纹感
渐变性能卡顿？别让 background-size 太小
当给一个大容器设了很小的 background-size（比如 10px 10px），再配上 linear-gradient，浏览器会反复平铺渲染，尤其在滚动或动画中容易掉帧。这不是渐变本身慢，是绘制粒度太细触发了重绘放大。
- 纯色渐变无需 tile：直接用
background-size: cover或干脆不设 - 要做纹理效果，优先考虑 SVG 作为 background-image，比 CSS 渐变更轻量、缩放无损
- 动画中避免动态改
background-position驱动渐变位移——改transform或用@keyframes动画background-position更稳妥，但得加will-change: background-position
渐变本身很简单，但和 background 层叠规则、浏览器解析策略、设备渲染管线搅在一起时，出问题的地方往往不在“怎么写”，而在“写在哪”和“跟谁一起写”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
