html - 框影圈

Question

我想像这样在圆圈中制作阴影

我试过这个:

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

但它做的不是我需要的。我该如何改进？

JSFIDDLE

Answer 1

我建议:

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 .