渐变角度冲突

Question

嘿伙计们我正在使用一个简单的CSS渐变：

background: linear-gradient(225deg, red 0%, white 10%, #aaaaaa 50%, #cccccc 56%, white 80%);

现在看下图：

看到角度225度从左下角开始，但是在CSS example它是渐变开始的右上角。为什么？

我提到MDNs关于渐变的文档，事实上W3c's examples本身非常擅长解释渐变，但仍然无法解决这个问题。

感谢。

亚历山大。

Answer 1

Angles in CSS右边没有零角度，但顶部没有。正角度是顺时针方向，而不是逆时针方向。

linear gradient中的设置未指定渐变开始的位置，而是指定渐变的目标。因此，225度角的目的地位于左下角，因此它从右上角开始。

Answer 2

度数意味着你的渐变色沿225度。和大多数数学定理一样，起点是（0,0），原点。 起始点表示0％，在您的css代码中为红色。

如果您希望从左下角到右上角开始颜色，则假设应用45度。

度也表示向量。 [1 1]'是45度，表示向量从左下到右上。 [-1 -1]'是225度，表示矢量从右上角到左下角开始。