увеличение размера окружности в радиальным градиентом в CSS3

-1

У меня есть следующие правила CSS для моего градиента:увеличение размера окружности в радиальным градиентом в CSS3

background-image: radial-gradient(circle at top right, rgb(237, 241, 254), rgb(195, 253, 237));

Я просто интересно, если бы я мог каким-то образом увеличить размер круга, который содержит первый цвет. Кажется, что цвет ограничен только небольшой областью. Это вообще возможно?

Приветствия

enter image description here

источник

2014-10-02 user1038814

увеличить высоту контейнера? Я не уверен, что вы действительно просите .. нужна дополнительная информация, чтобы помочь вам лучше – dippas

Извините, я объяснил это немного больше и добавил изображение. – user1038814

Я мог бы нашел решение для вас, смотрите как фрагменты:

1-й фрагмент кода только для сравнения:

div { 
 
    background: rgb(173, 217, 228); 
 
    /* Old browsers */ 
 
    background: -moz-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 75%, rgba(247, 251, 252, 1) 100%); 
 
    /* FF3.6+ */ 
 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(173, 217, 228, 1)), color-stop(75%, rgba(217, 237, 242, 1)), color-stop(100%, rgba(247, 251, 252, 1))); 
 
    /* Chrome,Safari4+ */ 
 
    background: -webkit-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 75%, rgba(247, 251, 252, 1) 100%); 
 
    /* Chrome10+,Safari5.1+ */ 
 
    background: -o-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 75%, rgba(247, 251, 252, 1) 100%); 
 
    /* Opera 12+ */ 
 
    background: -ms-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 75%, rgba(247, 251, 252, 1) 100%); 
 
    /* IE10+ */ 
 
    background: radial-gradient(ellipse at center, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 75%, rgba(247, 251, 252, 1) 100%); 
 
    /* W3C */ 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#add9e4', endColorstr='#f7fbfc', GradientType=1); 
 
    /* IE6-9 fallback on horizontal gradient */ 
 
    height: 400px 
 
}

<div></div>

второй фрагмент с большим кругом на правый/левый - верх/низ

div { 
 
    background: rgb(173, 217, 228); 
 
    /* Old browsers */ 
 
    background: -moz-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 60%, rgba(247, 251, 252, 1) 100%); 
 
    /* FF3.6+ */ 
 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(173, 217, 228, 1)), color-stop(60%, rgba(217, 237, 242, 1)), color-stop(100%, rgba(247, 251, 252, 1))); 
 
    /* Chrome,Safari4+ */ 
 
    background: -webkit-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 60%, rgba(247, 251, 252, 1) 100%); 
 
    /* Chrome10+,Safari5.1+ */ 
 
    background: -o-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 60%, rgba(247, 251, 252, 1) 100%); 
 
    /* Opera 12+ */ 
 
    background: -ms-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 60%, rgba(247, 251, 252, 1) 100%); 
 
    /* IE10+ */ 
 
    background: radial-gradient(ellipse at center, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 60%, rgba(247, 251, 252, 1) 100%); 
 
    /* W3C */ 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#add9e4', endColorstr='#f7fbfc', GradientType=1); 
 
    /* IE6-9 fallback on horizontal gradient */ 
 
    height:400px; 
 
}

<div></div>

Отличие от 1-го по 2-й фрагмент кода является расположение:

1-й - 75% или color-stop(75%
2-й имеет 60% или color-stop(60%

источник

2014-10-03 00:08:28 dippas

увеличение размера окружности в радиальным градиентом в CSS3

ответ

Смежные вопросы