CSS3 Эллиптический градиент в Chrome

Question

Я пытаюсь получить эллиптический градиент в хроме. Я пробовал

background-image: 
    -webkit-gradient(ellipse, center top, 0, center top, 50, from(rgba(0,0,0,0)), to(rgba(0,0,0,.5))), 
    -webkit-gradient(linear, 50% 100%, 50% 0%, from(#0A6B9A), to(#29ABE2)); 

Не повезло. Я пробовал несколько других вещей, которые я нашел в сети и в некоторых книгах, и все это просто терпит неудачу или выходит как круги.

Его легко сделать с помощью Firefox (прохладный эффект для тех, кто заинтересован):

background-image: 
    -moz-radial-gradient(40% 0%, circle, rgba(0,0,0,0), rgba(0,0,0,.5)), 
    -moz-linear-gradient(50% 100%, #0A6B9A, #29ABE2); 

Возможно ли это в хроме? Это должно быть возможно в соответствии с запланированными спецификациями для градиентов, которые я видел. Возможно, Chrome еще не поддержал его.

** Редактировать О, и я проверил, стиль не перезаписаны или любой такой джаз

Answer 1

-moz является CSS свойство зарезервировано только для Firefox - вот почему он не работает в Chrome (и в любом другом браузере).

Чтобы быть более конкретным, каждое свойство CSS, начинающееся с -, не является стандартным и будет работать только для определенных браузеров. Он используется только для совместимости. Если браузер не понимает, что означает свойство, он просто пропускает его, поэтому в файлах CSS есть несколько свойств, и по той же причине -moz и -webkit не будут работать везде (не только для вас).

Для CSS3-совместимых браузерах он должен быть тон в W3c конвенции, как

background: radial-gradient(ellipse at center, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); 

(цвета разные, просто отметим background: radial-gradient(ellipse ...)

Вы можете использовать http://www.colorzilla.com/gradient-editor/ или любой onther генератор CSS градиент для это, просто установите ориентацию на радиальный.