盒子阴影圆形

Question

我想制作一个像这样的圆形阴影：

我尝试了以下代码：

width: 50px;
height: 50px;
background-color: #e65525;
border-radius:50%;
box-shadow: 3px 3px 3px #e78267;

但它并没有做我需要的事情。我该如何改进呢？

JSFIDDLE

- gsiradze

Answer 1

我建议：

div {
    width: 50px;
    height: 50px;
    background-color: #e65525;
    border-radius:50%;
    box-shadow: 0 0 0 3px #e78267;
}

JS Fiddle示例。

您的问题出在box-shadow: 3px 3px 3px #e78267;这一行，具体来说：

• 3px（第一个）是水平偏移量，
• 3px（第二个）是垂直偏移量，
• 3px（第三个）是“模糊距离”。

我将其更改为box-shadow: 0 0 0 3px #e78267;，因为：

• 零偏移（对于水平和垂直）意味着阴影围绕形状本身居中，
• 第三个零提供了模糊距离为0，
• 3px提供了“扩展”（因此提供了实心的“阴影”，而不是模糊的阴影）。

参考文献：

• box-shadow (MDN：CSS)。
• box-shadow (W3.org。

- David Thomas

Answer 2

你几乎做到了，这是正确的代码：

  box-shadow: inset 0 0 0 6px #e78267;

仅供参考，inset用于在形状内创建阴影，第一和第二参数用于定位阴影（水平/垂直），第三个用于模糊，第四个用于扩散。如果您想要圆形内更少或更多的阴影，则可以稍微调整扩散。

- Jozsef Kerekes

Answer 3

box-shadow: 0px 0px 15px #e78267

- jay.jivani