我在www.example.com上做了一些CSScssbattle.dev，我使用了box-shadow属性
我很清楚一个框形阴影应该遵循它的元素的边界半径。上次我做的时候它确实工作得很好，但是现在它在Brave和Chrome上完全坏了，比如说在Firefox上它仍然工作。
我在寻找一个解释和一个解决方案

<div id="a"><div id="b"></div></div>
<style>
  body {
    margin: 0;
    height: 100%;
    display: grid;
    place-items: center;
    background: #0B2429
  }
  #a {
    width: 200px;
    height: 200px;
    transform: rotate(45deg);
    border-radius: 50% 0 50%;
    background: #998235;
    display: grid;
    place-items: center;
  }
  #b {
    width: 50px;
    height: 50px;
    background: #0B2429;
    border-radius: 100%;
    box-shadow: 0 0 0 45px #F3AC3C, 0 0 0 65px #0B2429;
  }
</style>

这是代码，这是我想做的https://cssbattle.dev/play/16