css - 在 CSS3 线性渐变中指定 Angular

Question

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

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

Answer 1

当渐变需要从一边到另一边时，最好使用 to [side] [side] 语法而不是使用 Angular 。您会在 my answer here 中找到关于为什么这种语法比 Angular 更好的详细解释。 .

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

CSS 渐变语法同时支持 to [side] 语法和 to [side] [side](换句话说，to corner) 语法。以下是 W3C Spec 的摘录(重点是我的):

using keywords

If the argument is to top, to right, to bottom, or to left, the angle of the gradient line is 0deg, 90deg, 180deg, or 270deg, respectively.

If the argument instead specifies a corner of the box such as to top left, the gradient line must be angled such that it points into the same quadrant as the specified corner, and is perpendicular to a line intersecting the two neighboring corners of the gradient box. This causes a color-stop at 50% to intersect the two neighboring corners (see example).

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