ナビゲーションの周りに放射状のグラデーションを作成する方法は？

Question

ナビゲーションの中央を流れるラジアルグラデーションを参照してください。私はdivをナビゲーションとして作ったとしましょう。画像のようなグラデーションを作成するにはどうすればよいですか？

注：の背後にあるの背景を見てください。

Answer 1

エディタです：http://jsfiddle.net/Jg8ZC/

background: #45392d; 
    background-repeat: no-repeat; 
    background-image: -webkit-radial-gradient(center center, circle contain, #624a36 0%, #45392d 80%); /* New WebKit syntax */ 
    background-image: -moz-radial-gradient(center center, circle contain, #624a36 0%, #45392d 80%); /* Firefox */ 
    background-image: -ms-radial-gradient(center center, circle contain, #624a36 0%, #45392d 80%); /* IE10+ */ 
    background-image: -o-radial-gradient(center center, circle contain, #624a36 0%, #45392d 80%); /* Opera (13?) */ 
    background-image: radial-gradient(center center, circle contain, #624a36 0%, #45392d 80%; /* standard syntax */ 

これは現代のすべてのブラウザで動作します。

Answer 2

これは放射状のグラデーションではありません。それはグラフィックのようです。

CSSについては、彼女のhttp://www.the-art-of-web.com/css/radial-gradients/またはgoogleをご覧ください。 TheresのあなたはCSS3でこれを行うことができ、ナビゲーションの後ろにある軽い茶色の輝き...の話ならここそこにリソース

の多くがhttp://www.westciv.com/tools/radialgradients/index.html

Example

Answer 3

あなたはCSSでこれを行うにしたい場合は、radial gradientを使用することができます。

background-image: -webkit-radial-gradient(contain, #bf8230 0%, #a65f00 100px); 

Example（jsFiddle）。

上記は、<div>のパディングボックスを中心に半径100pxの円形グローを作成します。

要素を「まわり」にしたい場合は、半透明のグラデーションの背景を持つ要素を、灰色の背景で囲むことができます（this example）。ネストされた要素がそのコンテナを満たしていないこと、そしてそのパディングボックスがグロー全体を含むことができることを確認する必要があります。そうしないと、「切り捨てられた」と表示されます。

（例はChromeのみのベータ版のために行われていた、おそらく適切なベンダープレフィックス呪文や他のブラウザのためのテストが必要になります。）