CSS3 радиальный градиент, отображающий разные в разных браузерах

Я пытаюсь использовать радиальный градиентный фон для своего сайта, он хорошо отображается в Firefox, но он отличается по-разному в Chrome и IE. В любом случае ниже показано, как он выглядит в Firefox (что я тоже хочу) и как он выглядит для IE и Chrome. Я использовал Ultimate CSS gradient generator, чтобы попытаться поддерживать совместимость между браузерами. Это код, который я использую для градиента.CSS3 радиальный градиент, отображающий разные в разных браузерах

background: #0e0e0e; /* No gradient support */ 
background: -moz-radial-gradient(center, ellipse cover, rgba(234,211,0,0.6) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */ 
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(234,211,0,0.6)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ 
background: -webkit-radial-gradient(center, ellipse cover, rgba(234,211,0,0.6) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-radial-gradient(center, ellipse cover, rgba(234,211,0,0.6) 0%,rgba(255,255,255,0) 100%); /* Opera 12+ */ 
background: -ms-radial-gradient(center, ellipse cover, rgba(234,211,0,0.6) 0%,rgba(255,255,255,0) 100%); /* IE10+ */ 
background: radial-gradient(ellipse at center, rgba(234,211,0,0.6) 0%,rgba(255,255,255,0) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ead300', endColorstr='#00ffffff',GradientType=1); /* IE6-9 fallback on horizontal gradient */

Ниже результат в разных браузерах:

Firefox

Chrome and IE

Chrome и IE

Кто-нибудь знает о каких-либо решений, чтобы сделать это искать simil ar в Chrome и IE?

источник

2013-08-22 Harry12345

Я думаю, что они отображаются по-разному, потому что браузеры разные. Как вы думаете? –

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

background: -moz-radial-gradient (в центре, покрытие эллипса, rgba (234,211,0,0,6) 25%, rgba (255,255,255,0) 100%);/* FF3.6 + */

источник

2013-08-22 19:30:31 itsmikem

Нет, это не имеет никакого эффекта ни в браузере – Harry12345

Hi Harry12345. У меня нет Firefox, поэтому я не могу это проверить. Но я подумал о другой идее (очевидно, но, тем не менее, о ней): фон: -moz-радиальный градиент (в центре, покрытие эллипса, rgba (234,211,0,0,6) 0%, rgba (234,211,0, 0,6) 25%, rgba (255 255 255,0) 100%);/* FF3.6 + */ Я просто добавляю еще один цветной стоп, чтобы от 0% до 25% он был чистым желтым, а затем он суживался. Я бы хотел узнать, работает ли это ... – itsmikem

Возможно, это связано с тем, как каждый браузер делает градиент, который вы используете.

Я думаю, что предоставление разных правил градиента для каждого префикса поставщика сделало бы это.

источник

2013-08-22 19:32:19

CSS3 радиальный градиент, отображающий разные в разных браузерах

ответ

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