color-stop位置必须带单位，百分比或长度值缺一不可；漏单位会导致色标被丢弃，多色标重叠可实现硬边过渡，rgba可控制透明度，radial-gradient中位置基于径向半径比例，旧Safari对同位置多色标支持不稳定。
color-stop 位置必须带单位，百分比或长度值缺一不可
浏览器不会自动推断 color-stop 的位置，linear-gradient(red, blue) 这种写法虽然合法，但两个色标默认在 0% 和 100%，根本没体现“明确标出”。真要控制每个停点，每个 color-stop 都得显式写位置，比如 red 25% 或 blue 120px。
常见错误是漏掉单位：red 25（错）→ 浏览器直接丢弃该色标，后续颜色前移，结果完全不可控；red 25%（对）或 red 10em（对）才生效。
- 百分比基于渐变线总长计算，从起点到终点归一化为 0% → 100%
- 长度值（
px、em、rem等）按实际尺寸解析，超出 0%–100% 范围也允许（比如red -10px或blue 120%），用于延伸渐变区域 - 多个色标可以重叠位置，比如
red 40%, orange 40%，实现硬边过渡
多色标之间不能留空隙，否则浏览器自动插值填充
如果只写 linear-gradient(red 0%, blue 50%)，中间 0% 到 50% 是平滑过渡，但很多人误以为“没写就是透明”或“留白”。实际上 CSS 渐变没有透明间隙概念——所有未声明色标的位置，均由相邻两个已声明色标线性插值得到。
想做出「红→透明→蓝」效果，必须用 rgba 或 transparent 显式声明中间色标：linear-gradient(red 0%, transparent 50%, blue 100%)。否则 red 0%, blue 100% 就是纯红蓝渐变，中间全是过渡色。
立即学习“前端免费学习笔记（深入）”；
- rgba 值可混合透明度：
rgba(255, 0, 0, 0.8) 20% - 同一位置多个色标（如
red 30%, blue 30%）会强制该点颜色突变，不插值 - 色标顺序必须递增，
red 50%, blue 30%中blue 30%会被忽略（Chrome/Firefox 行为一致）
radial-gradient 里 color-stop 的位置逻辑和 linear 不同
radial-gradient 的色标位置不是沿直线距离，而是沿径向半径比例。默认形状是椭圆（ellipse），尺寸是 closest-side，所以 50% 并不一定到中心到边缘的中点——它取决于容器宽高比和 sizing 关键字。
例如在正方形容器中，radial-gradient(red 0%, yellow 50%, blue 100%) 的 50% 大致落在半径中点；但在窄长容器里，50% 可能已经超出短边范围，导致黄色区域被压缩甚至不可见。
- 稳妥做法：用
radial-gradient(circle at center, ...)强制圆形 + 明确原点，再配合%或px定位 - 用
px单位更可控，比如red 0, yellow 40px, blue 80px，不受容器比例干扰 - 注意
closest-corner等 sizing 关键字会动态改变“100%”对应的实际像素距离
兼容性陷阱：老版 Safari 对多 stop 同位置支持不稳定
Safari 6.1–9.1 在处理像 red 20%, red 20%, blue 20% 这类同位置多色标时，偶尔会跳过中间项，导致本该硬切的地方变成渐变。这不是 bug 是早期规范实现差异。
真实项目里如果需兼容 iOS 9 以下或 macOS 10.11 旧 Safari，避免依赖“同位置多色标”的硬切行为，改用相邻极小间距替代：red 20%, red 20.01%, blue 20.01%。现代浏览器（Chrome 84+、Firefox 73+、Safari 14+）已无此问题。
- 检查目标用户 UA 分布，若基本无 iOS 9 以下设备，可放心用
20%, 20% - 构建工具中开启
postcss-cssnext或autoprefixer不会自动修复此问题——这是运行时渲染逻辑，非语法兼容 - 用
background: linear-gradient(...)时，务必加一层background: #xxx回退色，防整个渐变失效
最易被忽略的是：color-stop 位置一旦用了长度单位（如 px），整个渐变就失去响应性；而全用百分比时，又容易因父容器尺寸变化导致视觉节奏错乱。需要根据设计约束提前选型——是固定节奏（用 px），还是弹性适配（用 %），没法两全。
