Html 方框阴影圈
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27212782/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Box shadow circle
提问by gsiradze
回答by David says reinstate Monica
I'd suggest:
我建议：
div {
width: 50px;
height: 50px;
background-color: #e65525;
border-radius:50%;
box-shadow: 0 0 0 3px #e78267;
}
The problem you had was in your box-shadow: 3px 3px 3px #e78267;line, in turn:
box-shadow: 3px 3px 3px #e78267;反过来，您遇到的问题出在您的生产线上：
3px(the first) is the horizontal offset,3px(the second) is the vertical offset,3px(the third) is the 'blur' distance.
3px（第一个）是水平偏移量，3px（第二个）是垂直偏移，3px（第三个）是“模糊”距离。
I've changed that to box-shadow: 0 0 0 3px #e78267;, because:
我已将其更改为box-shadow: 0 0 0 3px #e78267;，因为：
- a zero offset (for both horizontal and vertical) means the shadow is centred around the shape itself,
- the third zero provides a blur distance of 0, annd
- the
3pxgives a 'spread' (so you that a solid 'shadow' is given, rather than a blurred shadow).
- 零偏移（水平和垂直）意味着阴影以形状本身为中心，
- 第三个零提供 0 的模糊距离，并且
- 这
3px给出了一个“传播”（所以你给出了一个坚实的“阴影”，而不是一个模糊的阴影）。
References:
参考：
回答by Jozsef Kerekes
You were almost there. This is the right code:
你快到了。这是正确的代码：
box-shadow: inset 0 0 0 6px #e78267;
For your information inset is for shadows inside the shape, first and second parameters are for positioning of shadow(horizontal/vertical), third for blur and fourth for spread. You can play with the spread a little bit if you want less or more shadow inside the circle.
对于您的信息，插图用于形状内部的阴影，第一个和第二个参数用于阴影的定位（水平/垂直），第三个用于模糊，第四个用于扩展。如果您希望圆圈内的阴影更少或更多，您可以稍微调整一下。
回答by jay.jivani
box-shadow: 0px 0px 15px #e78267
