应优先使用background: linear-gradient()而非background-image，因nvue不支持后者且H5端易被默认样式覆盖；需规范方向参数、显式设高、禁用伪元素及多层叠加。
直接用 background: linear-gradient()，别碰 background-image —— 尤其在 app 端（nvue）和 h5 上，后者容易被覆盖或不识别。
为什么 background-image: linear-gradient() 有时不生效
常见于三类场景：
• H5 页面被 uni-app 注入的默认样式盖掉，background-color 覆盖了 background-image；
• nvue 渲染层压根不支持 background-image 属性，只认 background 这个 shorthand；
• scoped 样式下伪元素（如 ::after）被深度选择器截断，叠加渐变失效。
解决办法：
• 强制清空背景色：background-color: transparent !important（H5 必加 !important，小程序可不加）；
• 统一改用 background: linear-gradient(...) 写法；
• nvue 中禁用伪元素，遮罩类效果必须用嵌套
方向参数怎么写才不“看不见”渐变
渐变不是没渲染，是轴向和容器尺寸错位导致视觉上像纯色。关键看动线与宽高比：
-
to bottom：从上到下（别用to top，容易误判为失效） -
to right：从左到右（iOS 微信 WebView 对90deg解析不稳定，优先用关键词） -
to bottom left：右上 → 左下（顺序固定，不能写成to left bottom） - 多色停驻点加百分比：
linear-gradient(to right, #f00 0%, #ff0 40%, #0f0 100%)
nvue 页面实现渐变的硬性限制
nvue 不是“CSS 削弱版”，而是渲染模型不同：它不走 WebKit/CSSOM，很多属性被主动忽略。
必须遵守的规则：
• 只允许一层 background: linear-gradient()，禁止叠加写法（如 background: linear-gradient() linear-gradient()）；
• 不支持 background-image、filter、伪元素、calc() 在 background 里动态计算；
• 高度必须显式设置（height 或 min-height），不能靠 100vh 撑开；
• 动态渐变（如滚动时变色）慎用字符串拼接：background: ${gradientStr} 在低端 Android 上易卡顿，推荐用 class 切换或 CSS 变量 + :root 控制。
nvue 的渐变容错率低，写错一个词、多一层嵌套、少一个单位，就直接回退成透明或纯色——没有报错，只有静默失败。
