1

cssグラデーションを使用して、透明なdiv内にファジーエッジが含まれる白い円を作成したいと思います。

本体よりも高いz-indexと絶対位置を使用すると、これをページの任意の部分に移動して、円の下のすべてを「ホワイトアウト」できるはずです。

お気に入りのグラデーションジェネレーターを試しましたが、機能しませんでした。

4

5 に答える 5

9 
<div id="circle"></div>

css

#circle {
    width: 50px;
    height: 50px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px; 
}
于 2013-02-21T13:13:36.163 に答える
2

http://www.colorzilla.com/gradient-editor/を使用してみてください。

これが私が彼らのツールを使って作ったものです:(向きを放射状に設定してください）

http://www.colorzilla.com/gradient-editor/#ffffff+24,ffffff+59&1+31,0+34;カスタム

エッジをよりぼやけさせるには、2番目の不透明度ストップを白からさらにドラッグします。その逆も同様です。

于 2013-02-21T13:15:38.810 に答える
1

ボックスシャドウのインセットプロパティを使用して白い背景を試して、ファジーエッジを作成します。ファジーがあなたにとって何を意味するのかわかりませんが。エッジの特定の色を念頭に置いている場合は、コードを提供できる可能性があります。

于 2013-02-21T13:19:26.943 に答える
0

放射状のグラデーションは、そのような目的にはやり過ぎだと思います。より良いブラウザサポートを備えたはるかに単純なソリューションは次のとおりです：http：//cdpn.io/yrJji

于 2013-02-21T14:09:20.667 に答える
0

GeorgeReithによって提案されたグラデーションを使用しました。

CSS

#white-circle {
background: radial-gradient(ellipse at center center , #FFFFFF 24%, #FFFFFF 31%, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0) 71%) repeat scroll 0 0 transparent;
height: 100px;
left: 150px;
position: absolute;
top: 0;
width: 100px;
z-index: 1;
}

結果は次のとおりです：http：//jsbin.com/avipih/1

于 2013-02-21T13:38:45.800 に答える