我想使用内部盒子阴影来画几个圆形。
这是我的 JsFiddle。
css
.circle {
width: 20px;
height: 20px;
display: inline-block;
border-radius: 50%;
border:1px solid #000;
}
如何在圆形中应用内部阴影指定 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;
.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
box-shadow
的一个好理由是它具有更好的浏览器支持(IE9),并且需要较少的供应商前缀变体,因此CSS代码更少。此外,如果OP还想要实际的背景图像,则渐变背景可能会产生干扰。 - Spudley