html - 框影圈

我想这样画阴影

我已经试过了:

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

但这不是我所需要的。我该如何改善呢？

JSFIDDLE

最佳答案

我建议:

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

JS Fiddle demo。

您遇到的问题依次出现在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。

关于html - 框影圈，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27212782/