勇敢/铬浏览器上的CSS错误

Question

我正在cssbttle.dev上做一些CSS，并且我正在使用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

Answer 1

我看不出它在Chrome上不起作用的原因。请在下面找到演示盒子阴影的代码，你应该能够非常清楚地看到它的工作原理。

div {
width: 100px;
height: 50px;
border-radius: 10px;
box-shadow: 10px 5px 5px red;
}

<div>
Hello
</div>

除非你在做别的事情。在这种情况下，您可能希望共享您的代码，以便我提供帮助。