具有相同参数的-webkit-线性渐变和线性渐变的不同渲染输出

Question

有人可以解释为什么使用

background: -webkit-linear-gradient(-45deg, black, red);

会产生与

background: linear-gradient(-45deg, black, red);

不同的结果，即使 两者具有相同的值？

但是

background: -webkit-linear-gradient(45deg, black, red);

（45deg 而不是 -45deg）产生与

background: linear-gradient(45deg, black, red);

相同的值（这是预期结果）。

我不明白为什么

-webkit-linear-gradient

在处理负度时没有给出与

linear-gradient

相同的结果（具有相同的参数）。

我希望我解释清楚了:)））

Answer 1

-webkit-linear-gradient

和

linear-gradient

之间角度起始位置和方向的定义不同。

在

-webkit-linear-gradient

中来自：https://webkit.org/blog/1424/css3-gradients/

角度是逆时针方向，0deg 是向右

在

linear-gradient

中，来自 https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient

0deg 的值相当于 top；增加值旋转 从那里顺时针方向。