Спецификация Угол в 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] (другие слова, к углу) синтаксиса. Ниже приводится выдержка из W3C Spec (выделено мной):

используя ключевые слова

Если аргумент вверх, направо, вниз или влево, угол наклона линии градиента составляет 0deg, 90deg, 180deg или 270deg, соответственно.

Если аргумент вместо задает угол коробки таким образом, чтобы в левом верхнем углу, градиент линии должны быть расположены под углом таким образом, что она указывает на то же квадранте, что и заданный угол, и перпендикулярно к линии, пересекающей два соседних угла градиента. Это приводит к остановке цвета на 50%, чтобы пересечь два соседних угла (см. Пример).

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