css - 盒子阴影无法复制完美的圆形

Question

我使用框阴影属性多次复制原始圆，每个阴影具有不同的扩展，请参阅:

.a {
    width: 50px;
    height: 50px;
    background: #EEB850;
    border-radius: 50%;
    position: relative;
    top: 117;
    left: 167;
    box-shadow: 0 0 0 50px #243D83,
        0 0 0 100px #6592CF;
}

但是，阴影并没有复制圆形，而是看起来像带有圆 Angular 的正方形。对此有什么建议吗？ Screenshot of the result .

Answer 1

虽然 Edge/Chrome 中存在错误，但解决方法可能是在较大的 before 伪元素上创建具有径向渐变的圆圈。

这是一个简单的例子:

.a {
  width: 50px;
  height: 50px;
  background: #EEB850;
  border-radius: 50%;
  position: relative;
  top: 117px;
  left: 167px;
}

.a::before {
  content: '';
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400%;
  height: 400%;
  border-radius: 50%;
  background-image: radial-gradient(#EEB850 0 25px, #243D83 25px 50px, #6592CF 50px 75px, transparent 75px 100%);
  background-position: top left;
}

<div class="a"></div>

注意:由于有时会通过径向渐变获得参差不齐的效果，因此代码片段将中心颜色作为其第一个圆圈，以避免边缘效应(元素和径向渐变之间的小间隙)。