css - 内箱の影で円を描く

Question

内側のボックスシャドウを使用していくつかの円を描きたいです。

ここに私のJsFiddleがあります

CSS

.circle {
 width: 20px;
 height: 20px;
 display: inline-block;
 border-radius: 50%;
 border:1px solid #000;

}

円に内側のボックスシャドウを適用するにはどうすればよいですか

Answer 1

inset内側の影、x と y の変位、ぼかし、色を指定します。例：

box-shadow: inset 3px 3px 4px #000;

デモ: http://jsfiddle.net/uJzgs/2/

互換性について:

-webkit-box-shadow: inset 3px 3px 4px #000;
-moz-box-shadow: inset 3px 3px 4px #000;
box-shadow: inset 3px 3px 4px #000;

Answer 2

使用しない理由radial-gradient

.circle {
 width: 20px;
 height: 20px;
 display: inline-block;
 border-radius: 50%;
 border:1px solid #000;
 background: radial-gradient(#FFF 40%, #000);
}

例 http://jsfiddle.net/za7b8/1