CSS如何制作带有颜色停止点的复杂渐变_在gradient函数中明确标出每一个color-stop的位置-css教程-PHP中文网

color-stop位置必须带单位，百分比或长度值缺一不可；漏单位会导致色标被丢弃，多色标重叠可实现硬边过渡，rgba可控制透明度，radial-gradient中位置基于径向半径比例，旧Safari对同位置多色标支持不稳定。

css如何制作带有颜色停止点的复杂渐变_在gradient函数中明确标出每一个color-stop的位置

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 关键字。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

例如在正方形容器中，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+）已无此问题。