我想制作一个像这样的圆形阴影:
我尝试了以下代码:
width: 50px;
height: 50px;
background-color: #e65525;
border-radius:50%;
box-shadow: 3px 3px 3px #e78267;
但它并没有做我需要的事情。我该如何改进呢?
我建议:
div {
width: 50px;
height: 50px;
background-color: #e65525;
border-radius:50%;
box-shadow: 0 0 0 3px #e78267;
}
您的问题出在box-shadow: 3px 3px 3px #e78267;
这一行,具体来说:
3px
(第一个)是水平偏移量,3px
(第二个)是垂直偏移量,3px
(第三个)是“模糊距离”。我将其更改为box-shadow: 0 0 0 3px #e78267;
,因为:
3px
提供了“扩展”(因此提供了实心的“阴影”,而不是模糊的阴影)。参考文献:
box-shadow: inset 0 0 0 6px #e78267;
仅供参考,inset用于在形状内创建阴影,第一和第二参数用于定位阴影(水平/垂直),第三个用于模糊,第四个用于扩散。如果您想要圆形内更少或更多的阴影,则可以稍微调整扩散。
box-shadow: 0px 0px 15px #e78267