在 CSS3 线性渐变中指定角度

Question

我使用 CSS3 线性渐变作为背景，目前我正在使用从左到右的渐变，但我想指定从左下角到右上角的渐变，但无法弄清楚角度的值应该是多少。

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

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% 处的色标与两个相邻角相交（参见示例）。

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