Синтаксис градиента Webkit - PullRequest
9 голосов
/ 18 июня 2010

Я читал о свойстве -webkit-gradient и не понимаю его.

Radial:

-webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),

Что означает 105 105, 20, 112 120, 50?

Линейный: * +1010 *

background: -webkit-gradient(linear, 40 50, 50 50, color-stop(0.0, yellow),
            color-stop(0.5, orange), color-stop(1.0, red));

Что означает 40 50, 50 50? 1014 *

1 Ответ

6 голосов
/ 09 июля 2010

Документация по градиенту Webkit

Для радиального градиента первые два аргумента представляют начальный круг с началом (x0, y0) и радиусом r0, а следующие два аргументапредставляют концевой круг с началом (x1, y1) и радиусом r1.

Итак, для радиального: «105 105, 20, 112 120, 50», это круг, начинающийся с 105 пикселей слева и 105 пикселей сверху с радиусом 20 пикселей и заканчивающийся кругом 112 пикселей слева и 120 пикселей сверхус радиусом 50px;

Для линейного: "40 50, 50 50", начните с 40px в левой верхней части 50px и продолжайте до 50px в левой верхней части 50px.

...