CSS3中的指定角度線性漸變

Question

我使用CSS3線性漸變作爲背景，目前我使用的是從左到右的漸變，但我想指定從左下到右上的漸變，但無法弄清楚應該是什麼值的角度。

background: linear-gradient(to right,#7E0F4B, #1A5865); 

Answer 1

當梯度需要從側視圖（S）去側視圖（S），它總是最好使用to [side] [side]語法，而不是使用角度。你會找到一個詳細的解釋，說明爲什麼這個語法比my answer here中的角度更好。

對於這種特殊情況，您可以在問題本身中得到答案。梯度需要從左下角到右上角，所以linear-gradient函數的第一個參數應該是to top right。

CSS漸變語法同時支持to [side]語法和to [side] [side]（換句話說，到角）語法。下面是從W3C Spec的提取物（強調的是礦）：

使用關鍵字

如果參數是到頂部，向右，向下，或向左，梯度線的角度分別爲0deg，90deg，180deg或270deg。

如果參數代替指定框的角如左上方，梯度線必須成一定角度，使得它指向到同一象限內，因爲指定角，並且是垂直於線相交梯度框的兩個相鄰角落。這會導致50％的顏色停止與相鄰的兩個角相交（請參閱示例）。

body { 
 
    background: linear-gradient(to top right, #7E0F4B, #1A5865); 
 
    min-height: 100vh; 
 
}