css - CSS3の放射状グラデーション

Question

CSSで線形グラデーションを作成した経験はありますが、この画像のような放射状グラデーションを作成したいと思います http://i.stack.imgur.com/T85xO.png

基本的に、要素の下部に配置されたライトグレーの放射状

Answer 1

ここでこのツールで遊ぶことができます。必要なものを生成すると、コードが提供されます。 http://www.westciv.com/tools/radialgradients/index.html

http://gradients.glrzad.com/

Answer 2

放射状グラデーションは現在、実装が混乱しており、Safari は楕円形の放射状背景をサポートしていません (Webkit Nightly はサポートしているため、Safari のサポートは近日中に開始されます)。Chrome にはよくわからないほど多くのバージョンがあり、IE9 はそれらをサポートしていません。

したがって、あなたの最善の選択肢は、インセットボックスの影を使ってそれを偽造することだと思います:

.shadow {
  height: 80px;
  box-shadow: inset 0 75px 75px #fff, 
              inset 0 50px 50px #fff,
              inset 0 20px 20px #fff,
              inset 0 5px 5px #fff;

  background: #ccc;
}

http://jsfiddle.net/nmtHf/

Answer 3

24 Ways は今年、Graidents in Depth を次の記事で取り上げました: http://24ways.org/2010/everything-you-wanted-to-know-about-gradients

下部に向かって、彼らは放射状のグラデーションにセクション全体を費やし、推奨される読書の2つの記事を提供します:

MDN
サファリ

ツール robx を投稿することをお勧めしますが、私が好きなら、物事がどのように機能するかを理解するための追加の読み物が好きです。