uni-app中用background: linear-gradient()实现渐变背景最稳妥，因nvue不支持background-image且伪元素；方向参数须规范（如to bottom），多色渐变可加百分比控制停驻，叠加遮罩需用view嵌套替代伪元素。
uni-app 里用 linear-gradient 实现渐变背景完全可行，但必须注意平台差异：H5 和小程序基本没问题，App 端（尤其是 nvue）需确认渲染层支持度，background 写法比 background-image 更稳妥。
为什么 background-image: linear-gradient() 在某些页面不生效
常见于开启了自定义导航栏或使用了 nvue 的页面。nvue 渲染引擎对 CSS 属性支持较保守，background-image 可能被忽略，而 background 是更可靠的 shorthand 写法。
- 优先用
background: linear-gradient(...)，不是background-image - nvue 中避免嵌套多层渐变（比如
background: linear-gradient(...) linear-gradient(...)），只保留一层 - H5 和微信小程序中两者都可，但统一用
background能减少跨端调试成本 - 如果用了
scoped样式，确保渐变类名没被深度选择器意外截断（例如.container::after在 scoped 下可能失效）
linear-gradient 方向参数怎么选才不翻车
方向写错会导致渐变“看不见”——不是颜色没变，是渐变轴和容器尺寸不匹配，视觉上像纯色。关键看容器宽高比和预期动线。
- 从上到下：用
to bottom（不是to top，后者容易误以为没生效） - 从左到右：用
to right，别写90deg—— 某些旧版 iOS 微信 WebView 对角度解析不稳定 - 斜向（如右上→左下）：必须用
to bottom left，不是to left bottom，顺序固定 - 想控制某段颜色停留更久？加位置百分比：
linear-gradient(to right, #f00 0%, #ff0 40%, #0f0 100%)
多色渐变 + 透明遮罩叠加的实用组合
纯渐变有时太“跳”，加一层透明渐变遮罩能柔化文字可读性，尤其在图片或复杂内容上方。
立即学习“前端免费学习笔记（深入）”；
- 主渐变设为底色：
background: linear-gradient(to bottom, #4e54c8, #b0e0e6) - 用
::after叠加一层从透明到底部实色的遮罩：background: linear-gradient(to bottom, rgba(255,255,255,0), #fff) - 遮罩层必须设
position: absolute、z-index和显式宽高，否则脱离文档流后不渲染 - App 端 nvue 不支持伪元素，这种叠加得拆成两个
<view></view>嵌套实现
真正容易被忽略的是：渐变本身不触发重排，但如果你用 JS 动态改 background 字符串（比如拼接 opacity 变量），在低端 Android App 上可能卡顿；更稳的做法是用 CSS 变量 + :root 切换，或直接换 class。
