Brave/Chrome浏览器中box-shadow不跟随border-radius的CSS问题求助

我在编写CSS代码时遇到异常：使用box-shadow属性时，阴影本该跟随元素的border-radius呈现圆角，但在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>

原因分析 #

这是Chrome/Brave所使用的Blink内核的已知渲染Bug：当元素的父容器应用了transform: rotate()等变换属性时，子元素的box-shadow会忽略自身的border-radius设置，强制以矩形渲染。Firefox的Gecko内核不存在该渲染逻辑问题，因此能正常显示圆角阴影。

解决方案 #

有两种简单可行的修复方式：

方案1：给子元素添加反向旋转变换 #

让子元素#b与父容器的变换上下文对齐，给#b添加与父容器方向相反的旋转变换：

#b {
  /* 原有样式不变 */
  transform: rotate(-45deg);
}

修改后的完整代码：

<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;
    transform: rotate(-45deg);
  }
</style>

方案2：转移旋转变换至body #

将父容器的旋转变换移到body上，避免子元素处于变换上下文之中：

body {
  /* 原有样式不变 */
  transform: rotate(45deg);
}
#a {
  /* 移除原有transform: rotate(45deg); */
}

修改后的完整代码：

<div id="a"><div id="b"></div></div>
<style>
  body {
    margin: 0;
    height: 100%;
    display: grid;
    place-items: center;
    background: #0B2429;
    transform: rotate(45deg);
  }
  #a {
    width: 200px;
    height: 200px;
    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>

内容的提问来源于stack exchange，提问作者Tanguy Macé