在CSS3线性梯度中指定角度

Question

我使用CSS3线性渐变作为背景，目前我使用从左到右的渐变，但我想指定从左下到右上的渐变但不能弄清楚角度的值应该是什么这一点。

line 1:0 mismatched input 'webpage' expecting ID

Answer 1

当渐变需要从侧面移动到侧面时，最好使用to [side] [side]语法而不是使用角度。您将找到有关此语法为何比my answer here中的角度更好的详细说明。

对于这种特殊情况，您可以在问题本身中找到答案。渐变需要从左下角到右上角，因此linear-gradient函数的第一个参数应为to top right。

CSS渐变语法支持to [side]语法和to [side] [side]（换言之， to corner ）语法。以下是W3C Spec的摘录（重点是我的）：

  

使用关键字

     

如果参数是顶部，右侧，底部或左侧，则渐变线的角度分别为0度，90度，180度或270度。

     

如果参数改为指定框的一角（例如左上角 ），则渐变线必须成角度，使其指向与指定的相同的象限角，并垂直于与渐变框的两个相邻角相交的线。这会导致50％的颜色停止与两个相邻的角相交（参见示例）。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;