Como aplicar vários gradientes radiais css em um único elemento - html, css, styling, gradientes radiais, gradientes

Eu tenho o seguinte estilo aplicado ao meu div elemento:

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

Isso tem o efeito desejado (sendo um sombreamento interno apenas na parte superior do div) Eu gostaria de aplicar o mesmo efeito na parte inferior do div. A linha a seguir funciona bem, mas parece substituir a primeira, para que eu possa obter apenas uma ou outra.

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

Alguém pode me mostrar como posso ter vários fundos gradientes radiais por elemento? Percebo que o webkit pode fazer isso facilmente, mas estou procurando uma implementação / alternativa em vários navegadores.

obrigado

Respostas:

4 para resposta № 1

Apenas separe cada um deles com uma vírgula.

Algo assim :

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

Claro que em vez de url você pode colocar gradiente.

E todos os navegadores modernos suportam esse recurso (o que significa que o IE não suporta).

Para disponibilizá-lo no IE, você pode usar pie.htc

---

5 para resposta № 2

Você apenas os lista um após o outro - assim:

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

Você pode vê-lo trabalhando em http://dabblet.com/gist/2759668

---

1 para resposta № 3

Você deve definir o valor do gradiente radial como transparente para permitir que o outro plano de fundo apareça:

   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%);

---