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