Jak zastosować wiele gradientów radialnych css do pojedynczego elementu - html, css, stylizacja, gradienty radialne, gradienty

Mam następujący styl zastosowany do mojego div element:

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

Ma to pożądany efekt (bycie wewnętrznym cieniem tylko u góry div). Chciałbym zastosować ten sam efekt na dole div. Następująca linia robi to dobrze, ale wydaje się, że zastępuje pierwszą, więc mogę dostać tylko jedną lub drugą.

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

Czy ktoś może mi pokazać, jak mogę mieć wiele promieniowych tła gradientu na element? Widzę, że webkit może to łatwo zrobić, ale szukam implementacji / alternatywy dla różnych przeglądarek.

Dzięki

Odpowiedzi:

4 dla odpowiedzi № 1

Po prostu oddziel każdy z nich przecinkiem.

Coś takiego :

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

Oczywiście zamiast url można umieścić gradient.

Wszystkie nowoczesne przeglądarki obsługują tę funkcję (co oznacza, że ​​IE nie).

Aby udostępnić go w IE, możesz użyć pie.htc

---

5 dla odpowiedzi nr 2

Po prostu wymieniasz je jeden po drugim - tak:

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

Możesz zobaczyć, jak działa http://dabblet.com/gist/2759668

---

1 dla odpowiedzi nr 3

Musisz ustawić wartość gradientu radialnego na przezroczysty, aby umożliwić przechodzenie drugiego tł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%);

---