2012-02-15 3 views
1

Я нашел это валяется:CSS правило линейного градиента

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

Я предполагаю, что 2-й и 3-й Титулы являются начальным и конечным цветом градиента, но что именно делает первый PARAM «центр сверху» означает?

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

ответ

2

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

< боковых или угол>

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

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

2

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

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 */ 
Смежные вопросы