Сделать радиус радиальных градиентов 200px - PullRequest
Новая
       4

Сделать радиус радиальных градиентов 200px

4 голосов
/ 21 сентября 2011

Как бы я сделал радиус 200px по ширине и высоте? Я читал, что это может быть сделано в пиксельных единицах, но каждая попытка не удалась. 

background-image: -webkit-radial-gradient(75% 100%, circle farthest-corner, #ffffff, #ff7ae9 33%);
background-image: -o-radial-gradient(75% 19%, circle farthest-corner, #ffffff, #ff7ae9 33%);
background-image: -ms-radial-gradient(75% 19%, circle farthest-corner, #ffffff, #ff7ae9 33%);
background-image: radial-gradient(75% 19%, circle farthest-corner, #ffffff, #ff7ae9 33%)
background-image: -moz-radial-gradient(75% 19%, circle farthest-corner, #ffffff, #ff7ae9 33%);

1 Ответ

5 голосов
/ 22 сентября 2011

edit : добавлены все префиксы поставщиков, чтобы сделать его более понятным 

background-image:    -moz-radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px);
background-image: -webkit-radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px);
background-image:      -o-radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px);
background-image:     -ms-radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px);
background-image:         radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px);

В этом примере «200px» - это размер круга, подойдут любые стандартные единицы CSS, такие как px, em или проценты.

50px 100px - это положение центра круга, оно работает так же, как background-position , поэтому такие значения, как 'left top', тоже подойдут.

Существует несколько онлайн-генераторов , которые могут помочь вам со всеми префиксами, специфичными для поставщика.

приписка
@ Значения пикселей Мохсена в порядке, MDN говорит:

или процент от 0% до 100%, или длина вдоль оси градиента

Если вы нажмете « длина », то появится

Синтаксис CSS для длины - это число, за которым сразу следует единица измерения. Пробел между номером и единицей не разрешен.

...