transparent在linear-gradient中不可靠，应使用rgba()/hsla()显式控制alpha；避免混用transparent与rgba()；opacity影响整个元素，不能替代背景透明度；多色渐变需显式声明色标位置；IE10–11不支持rgba()渐变，须提供降级方案。
background-image: linear-gradient() 中透明色的写法容易出错
直接写 transparent 看似合理，但实际会触发浏览器回退到纯黑或纯白（取决于渲染引擎），尤其在 Safari 和旧版 Edge 中表现不一致。真正可控的方式是用 rgba() 或 hsla() 显式声明 alpha 通道。
-
transparent是语义值，不是颜色值，CSS 规范未强制其对应具体 rgba 值，各浏览器实现不同 - 想让顶部完全透明、底部半透蓝，应写成：
linear-gradient(to bottom, rgba(255,255,255,0), rgba(0,123,255,0.5)) - 避免混用
transparent和rgba()在同一渐变中，例如linear-gradient(red, transparent, rgba(0,0,0,0.3))可能导致中间段意外不透明
opacity 不能替代渐变中的透明度控制
opacity 作用于整个元素及其所有子内容，一旦设置，文字、图标、子容器都会一起变淡。而背景渐变的透明度必须只影响背景层本身——这只能靠 background-image 内部的颜色 alpha 实现。
- 错误做法：
div { background: linear-gradient(to right, #ff6b6b, #4ecdc4); opacity: 0.8; }—— 这会让里面的所有文字也变淡 20% - 正确做法：把透明度写进渐变色里，如
background: linear-gradient(to right, rgba(255,107,107,0.9), rgba(78,205,196,0.9)) - 如果需叠加半透遮罩层，建议用伪元素：
::before绘制渐变背景，主元素保持opacity: 1
多色渐变 + 透明度组合时，色标位置必须显式声明
当混合不透明色与透明色时，浏览器对默认色标位置（0%、50%、100%）的插值逻辑容易失准，尤其在 Chrome 115+ 和 Firefox 120 中有细微偏移，导致过渡生硬或出现意外色带。
- 不要依赖隐式位置：
linear-gradient(to bottom, #fff, rgba(0,0,0,0.2), #000) - 应明确标注关键节点：
background: linear-gradient( to bottom, #ffffff 0%, rgba(0, 0, 0, 0.2) 60%, #000000 100% );
- 若需更精细控制（比如让透明段集中在顶部 20% 区域），可写成：
rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 20%, #333 100%
兼容性兜底要防住 IE10–IE11 的 rgba 渐变失效
IE10/11 支持 linear-gradient()，但不支持在其中使用 rgba() 颜色值——它会直接忽略整条声明，退回到无背景状态。这不是 bug，是标准实现差异。
立即学习“前端免费学习笔记（深入）”；
- 必须提供降级：
div { background: #f0f0f0; /* IE9 及以下 & 部分旧安卓 WebView */ background: linear-gradient(to bottom, #f0f0f0, #ccc); /* IE10–11 可用的不透明渐变 */ background: linear-gradient(to bottom, rgba(240,240,240,0.9), rgba(204,204,204,0.9)); /* 现代浏览器 */ } - 可以借助
@supports更精准判断：@supports (background: linear-gradient(rgba(0,0,0,0.1), #000)) { .card { background: linear-gradient(...); } } - 注意：Autoprefixer 不会自动处理
rgba()在渐变中的兼容性，需手动加备选
渐变里的透明度不是“调个参数”就完事，它是颜色模型、渲染管线、浏览器解析顺序三者交叠的结果。最常被忽略的是色标位置省略带来的插值偏差，以及把 opacity 当作背景透明开关的惯性思维。
