6

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

ありがとう

4

4 に答える 4

5

それぞれをコンマで区切るだけです。

このようなもの ：

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

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

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

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

于 2012-05-20T21:41:40.977 に答える
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で動作しているのを見ることができます

于 2012-05-20T21:49:31.160 に答える
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%);
于 2013-08-30T11:20:02.253 に答える