CSS 梯度路径是如何计算的？

Question

使用线性渐变时，例如

div {
  width: 300px;
  height: 50px;
  background: linear-gradient(to right, blue, red);
}

<div></div>

可以通过不同的路径更改颜色。

在上面的示例中，可以通过线性修改 R 和 B 通道来完成，而不触及 G 通道——但变化也可以是非线性（例如，提供一种线性感，因为它更符合生理），或者通过修补 G 通道（同样是因为它对我们的 'red to blue transition' 来说似乎更真实眼睛）。

linear-gradient中切换两种颜色的公式是什么？

Answer 1

HTML/CSS 中的梯度是线性插值，纯数学。根据 W3C canvas 规范：

Once a gradient has been created (see below), stops are placed along it to define how the colors are distributed along the gradient. The color of the gradient at each stop is the color specified for that stop. Between each such stop, the colors and the alpha component must be linearly interpolated over the RGBA space without premultiplying the alpha value to find the color to use at that offset. Before the first stop, the color must be the color of the first stop. After the last stop, the color must be the color of the last stop. When there are no stops, the gradient is transparent black.

SVG 的工作方式相同。

CSS 梯度是相同的，除了一处不同（强调我的）：

Between two color stops, the line’s color is interpolated between the colors of the two color stops, with the interpolation taking place in premultiplied RGBA space.

所以这三个都使用线性插值，canvas/SVG 使用非预乘 alpha 而 CSS 使用预乘 alpha（看起来更好）。至于为什么会有所不同，请看这个例子：

html, body, svg, div {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0; 
  padding: 0;
  background: white;
}
svg {height: 60%;}
div.gradient {
  height: 20%;
  margin-top: 0.2%;
  background: linear-gradient(to right,
  rgba(0%, 100%, 0%, 1),
  rgba(0,0,0,0));
}

<svg>
  <linearGradient id="a">
    <stop offset="0" stop-color="lime"
      stop-opacity="1" />
    <stop offset="1" stop-color="lime"
      stop-opacity="0" />
  </linearGradient>
  <linearGradient id="b">
    <stop offset="0" stop-color="lime"
      stop-opacity="1" />
    <stop offset="1" stop-color="black"
      stop-opacity="0" />
  </linearGradient>
  <linearGradient id="c">
    <stop offset="0" stop-color="rgba(0%, 100%, 0%, 1)" />
    <stop offset="1" stop-color="rgba(0,0,0,0)" />
  </linearGradient>
  <rect width="100%" height="33%"
    fill="url(#a)" />
  <rect width="100%" height="33%" y="33.5%"
    fill="url(#b)" />
  <rect width="100%" height="33%" y="67%"
    fill="url(#c)" />
</svg>
<div class="gradient"></div>
<ul>
  <li>Top: SVG gradient with constant stop-color and transitioned stop-opacity;</li>
  <li>2nd: SVG gradient with stop-color transitioning to black and stop-opacity transitioning to zero;</li>
  <li>3rd: SVG gradient with rgba colors;</li>
  <li>Bottom: CSS gradient with the same rgba colors.</li>
</ul>
<p>All transition from opaque lime to fully transparent; in all but the first SVG gradient, the final stop is transparent black.  The CSS gradient scales the intensity of the color by the alpha value before transitioning, so you don't get the fade to gray effect.</p>

免责声明：那不是我的片段！我从这个 CodePen example 中获取了它，但是如果我自己不添加代码，就不会让我 link 使用它。

CSS 梯度路径是如何计算的？

How is a CSS gradient path calculated?

css

algorithm

colors

linear-gradients