Как применить несколько CSS радиальных градиентов к одному элементу

Question

я следующий стиль применяется к моему div элементу:

background-image: -moz-radial-gradient(50% -10%, ellipse closest-corner, rgba(5, 5, 5, 0.7), rgba(0, 0, 0, 0) 100%); 

Это имеет желаемый эффект (будучи внутреннюю тень будет только в верхней части div). Я хотел бы применить тот же эффект в нижней части div. Следующая строка делает это хорошо, но, похоже, она переопределяет первое, поэтому я могу получить только тот или иной.

background-image: -moz-radial-gradient(50% 110%, ellipse closest-corner, rgba(5, 5, 5, 0.7), rgba(0, 0, 0, 0) 100%); 

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

Благодаря

Answer 1

Просто sepereate каждый с запятой.

Что-то вроде этого:

background-image: url(),url(), url(); 

Ofcourse вместо URL вы можете поместить градиент.

И все современные браузеры поддерживают эту функцию (это значит, что IE не работает).

Для того, чтобы сделать его доступным в IE, вы можете использовать pie.htc

Answer 2

Вы просто перечислить их один за другим - как это:

background: radial-gradient(top left, 
      rgb(205, 230, 235) 34%, 
      transparent 34%), 
     radial-gradient(center, 
      rgb(205, 230, 235) 34%, 
      transparent 34%); 

Вы можете видеть это работает на http://dabblet.com/gist/2759668

Answer 3

Вы должны установить прозрачность прозрачного радиального градиента, чтобы пропускать другой фон:

background-image: radial-gradient(closest-corner at 40% 70%,#FFFFFF 0%, rgb(171,171,171),50%,transparent), 
        radial-gradient(closest-corner circle at 80% 20%, #FFFFFF 0%, rgb(171,171,171),20%,transparent), 
        radial-gradient(closest-corner circle at 10% 10%, #FFFFFF 0%,rgb(171,171,171) 25%);