HTML、CSS、スタイリング、ラジアルグラジエント、グラジエントの各要素に複数のCSS放射グラデーションを適用する方法

私は次のスタイルを自分に適用しています 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はこれを簡単に行えることに気付きましたが、クロスブラウザの実装/代替を探しています。

ありがとう

回答：

回答№1は4

それぞれをコンマで区切ってください。

このようなもの ：

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

もちろん、URLの代わりにグラデーションを付けることができます。

また、最新のブラウザはすべてこの機能をサポートしています（つまりIEはサポートしていません）。

IEで使用できるようにするには、次を使用できます。 pie.htc

---

回答№2のための5

次のように、それらを次々にリストします。

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

---

回答№3の場合は1

他の背景を透過させるために、放射状グラデーションの値を透明に設定する必要があります。

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

---