преобразования градиента линейного градиента синтаксиса

Question

Я пытаюсь преобразовать стиль CSS от градиента линейного градиента, но я немного запутался о синтаксисе:

background: gradient(linear, left top, right top, from(#BF942F), to(#BF942F), color-stop(0.5, #F8F8DC)); 

Я знаю, что могу, очевидно, удалить «линейный ', но я немного потерял после этого:

background: linear-gradient(left top, right top, from(#BF942F), to(#BF942F), color-stop(0.5, #F8F8DC)); 

Может ли кто-нибудь дать представление?

Answer 1

• left top, right top следует сопоставить с одним параметром направления: to right. Бит top незначителен, так как это горизонтальный линейный градиент.

• from, to и color-stop функциональные обозначения не используются; вместо этого цвета останавливаются в порядке. На основании того, что у вас есть, похоже, что это должно быть #BF942F, #F8F8DC, #BF942F. Так как каждая остановка цвета является эквидистантной (0%, 50%, 100%), нет необходимости указывать точное местоположение каждого из них.

Следовательно:

background: linear-gradient(to right, #BF942F, #F8F8DC, #BF942F); 

Here's a comparison of the old and new syntaxes. Заметим, что так как обозначение, что у вас есть это WebKit изобретение, оно только существует как -webkit-gradient() и, таким образом, можно увидеть только в браузере WebKit основе такого как Safari или Chrome.