CSS中background-color的alpha渐变需统一用rgba()格式避免transparent，遮罩须用position:fixed全屏覆盖，opacity过渡更可靠但影响子元素，prefers-reduced-motion下需降级处理。
transition 无法直接控制 background-color 的 alpha 渐变
CSS transition 对 background-color 做渐变时，如果起始或结束色用的是 rgba(0,0,0,0.5) 这类带 alpha 的值，浏览器会插值计算 RGB 和 alpha 分量——但问题在于：**当目标色是 transparent 或 rgba(0,0,0,0) 时，部分浏览器（尤其是旧版 Safari 和某些 Android WebView）会跳过 alpha 插值，直接硬切**。
这是因为 transparent 是关键字，不是颜色值；而 rgba(0,0,0,0) 在某些渲染引擎中会被优化掉 alpha 通道参与过渡。
- 务必统一用
rgba()格式写起止色，避免混用transparent和rgba - 起始色和结束色的 R/G/B 分量最好一致（比如都用
rgba(0,0,0,0.8)→rgba(0,0,0,0)），否则你会看到颜色偏移 + 透明度变化的双重干扰 - Chrome 110+ 和 Firefox 120+ 支持较稳，但 iOS 16.4 之前的 Safari 仍存在 alpha 插值丢失问题
全屏遮罩必须用 fixed 定位 + z-index 精确控制层级
遮罩层不是简单加个 div 就完事。常见错误是用 position: absolute 挂在某个父容器里，结果滚动后遮罩错位、或被其他 transform 元素裁剪。
正确做法只有一条：遮罩元素必须脱离文档流、覆盖视口全域、且不被任何祖先的 overflow: hidden 或 transform 截断。
立即学习“前端免费学习笔记（深入）”；
- 用
position: fixed，四边设为top: 0; right: 0; bottom: 0; left: 0 -
z-index设为足够高（比如9999），但要确认它没被更高层的modal或toast组件覆盖 - 禁止给遮罩加
transform（如scale(1)），否则 Safari 会强制启用合成层并干扰 alpha 过渡 - 不要依赖
height: 100vh—— 在移动端地址栏收放时会出高度抖动
opacity 过渡比 rgba alpha 更可靠，但有副作用
如果只要“淡入淡出”效果，直接对遮罩元素用 opacity 过渡是最稳妥的方案。它不依赖颜色格式，所有现代浏览器都支持平滑插值。
但要注意：opacity 会让整个元素及其子节点一起变透明，如果你遮罩里还塞了按钮、文字等交互内容，它们也会跟着变模糊、不可点。
- 若遮罩纯色无内容，优先用
opacity: 0 → opacity: 1 - 若遮罩内需保留可点击区域（比如关闭按钮），必须拆分为两层：背景层用
opacity，内容层用position: fixed单独定位并设pointer-events: auto -
opacity会触发新图层（layer），可能增加内存开销，长列表页慎用高频切换
prefers-reduced-motion 下要主动降级动画
系统开启“减少运动”后，transition 和 animation 默认会被禁用，但很多遮罩组件没做适配，导致用户点开后遮罩瞬间闪现，毫无过渡。
这不是 bug，是预期行为。你需要显式监听并提供降级路径。
- 用
@media (prefers-reduced-motion: reduce)把transition设为none，同时把初始状态设为opacity: 0和visibility: hidden - JS 控制显示时，先设
visibility: visible，再设opacity: 1（不依赖 transition） - 别只靠 CSS，JS 侧也要检查
window.matchMedia('(prefers-reduced-motion: reduce)').matches，避免动画逻辑误触发
alpha 通道的平滑过渡看着简单，实际卡在浏览器实现差异、定位模型、系统偏好三层交界上。最容易被忽略的是 fixed 层级和 prefers-reduced-motion 的组合影响——调通一个机型，不代表全平台可用。
