用 linear-gradient(90deg, #ff6b6b 0%, #ffb347 35%, #4ecdc4 100%) 显式指定角度和色标位置，是唯一兼顾视觉均匀与跨浏览器一致性的方案；角度值稳定不依赖容器尺寸，手动设色标可控制人眼感知的过渡节奏。
直接说结论：用 linear-gradient() 显式声明方向 + 手动指定颜色停靠点（color stop），是唯一能同时满足“视觉均匀”和“跨浏览器行为可预测”的做法。默认不写方向、不写位置，浏览器会按自己规则插值，结果根本不可控。
为什么“不写方向”会导致渐变看起来不均匀？
很多人写 linear-gradient(#ff6b6b, #4ecdc4) 就完事，但这个写法等价于 linear-gradient(to bottom, #ff6b6b, #4ecdc4)。问题在于：不同浏览器对“to bottom”的像素级映射略有差异，尤其在容器宽高比变化时（比如响应式布局中），垂直方向的渐变长度实际受 height 影响，而人眼判断“均匀”依赖的是水平/对角线方向上的色带节奏感。
- 移动端 viewport 缩放后，
to bottom渐变可能被拉长或压缩，过渡段变窄或变糊 - Firefox 对
to right的起始偏移处理比 Chrome 多 1px 左右，小尺寸容器里肉眼可见断层 - 真正稳定的参照系是角度（如
90deg），它不依赖容器尺寸，只依赖坐标系
怎么写 color stop 才让过渡“看起来匀”？
浏览器默认把颜色均匀分配在 0% → 100% 区间，但这不等于人眼感知均匀。比如从深红到青绿，中间经过黄调，如果黄只占 10%，人眼会感觉“跳变”。要控制观感，必须打破等分逻辑：
- 用百分比明确锚定关键色相出现的位置：
linear-gradient(90deg, #ff6b6b 0%, #ffb347 35%, #4ecdc4 100%) - 避免使用像素单位混搭：
#ff6b6b 20px和#4ecdc4 50%同时出现，Safari 会静默忽略整条声明 - 想拉长某段过渡？把相邻两个 stop 设成同一位置：
#ff6b6b 20%, #ffb347 20%, #4ecdc4 80%—— 这样黄就从 20% 开始立即生效，无过渡
透明色和兼容性最容易翻车的三个点
加透明度不是简单把 rgb() 换成 rgba() 就完事。IE10+ 才认 rgba() 在 linear-gradient() 里，旧 Safari（≤6.1）连 transparent 都不支持关键词 fallback。
- 安全写法永远是：
linear-gradient(90deg, #ff6b6b, transparent 70%, #4ecdc4)，用transparent替代rgba(0,0,0,0) - 必须用半透色？得套
@supports (background: linear-gradient(transparent, red))做降级，否则老浏览器直接丢掉整个 background 声明 - 别信“现代浏览器都支持”，iOS 14.5 的 WKWebView 对
hsla()在渐变里仍有解析 bug，实测会变成纯黑
最常被忽略的其实是渐变的“载体”——它本质是一张动态生成的 <image></image>，所以所有能接图片的 CSS 属性（background-image、border-image、mask-image）才能用它。想给文字上渐变？得靠 background-clip: text 配合 color: transparent，少一个属性，文字就变黑块。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
