画一个带内部阴影的圆形

Question

我想使用内部盒子阴影来画几个圆形。

这是我的 JsFiddle。

css

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

}

如何在圆形中应用内部阴影

- shubendrak

Answer 1

指定 inset 用于内部阴影，以及x和y的位移，模糊度和颜色。例如：

指定内阴影使用 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;

- Guffa

---

我正在尝试从每个角度获取一个均匀的阴影，但它并不均匀。 - shubendrak

@Shubendra：然后将x和y位移设置为0。演示：http://jsfiddle.net/uJzgs/3/ - Guffa

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);
}

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

- Kevin Bowersox

---

可以这样做，但我认为使用box-shadow的一个好理由是它具有更好的浏览器支持（IE9），并且需要较少的供应商前缀变体，因此CSS代码更少。此外，如果OP还想要实际的背景图像，则渐变背景可能会产生干扰。 - Spudley