линейное градиентное правило css - PullRequest
1 голос
/ 15 февраля 2012

Я нашел это лежащим вокруг:

background-image: -moz-linear-gradient(center top, #B6D3F4, #5483B8);

Я предполагаю, что 2-й и 3-й параметры являются начальным и конечным цветом градиента, но что именно означает первый параметр "центральная вершина"?

Учитывая, что -moz-linear-gradient явно относится к Mozilla, какова эквивалентная стандартная версия CSS3 этого правила?

Ответы [ 2 ]

2 голосов
/ 15 февраля 2012

Для всех браузеров:

background: #b6d3f4; /* Old browsers */
background: -moz-linear-gradient(top,  #b6d3f4 0%, #5483b8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b6d3f4), color-stop(100%,#5483b8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #b6d3f4 0%,#5483b8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #b6d3f4 0%,#5483b8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #b6d3f4 0%,#5483b8 100%); /* IE10+ */
background: linear-gradient(top,  #b6d3f4 0%,#5483b8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6d3f4', endColorstr='#5483b8',GradientType=0 ); /* IE6-9 */
2 голосов
/ 15 февраля 2012

Пожалуйста, посмотрите на MDN . Если я читаю правильно, вы можете принять префикс.

<бок или угол>

Представляет позицию начальной точки линии градиента. Он состоит из двух ключевых слов: первое указывает горизонтальную сторону, левую или правую, а второе - вертикальную, верхнюю или нижнюю. Порядок не имеет значения, и каждое ключевое слово является необязательным.

Значения сверху, снизу, слева и справа переводятся в углы 0deg, 180deg, 270deg, 90deg соответственно. Другие переводятся в угол, который позволяет начальной точке находиться в том же квадранте, что и описанный угол, и поэтому линия, определяемая начальной точкой и углом, перпендикулярна линии градиента. Таким образом, цвет, описанный , будет в точности применяться к угловой точке. Это иногда называют свойством "магического угла". Конечная точка линии градиента - это симметричная точка начальной точки в другом направлении центральной рамки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...