单边具有大边框半径的嵌入框阴影是否是 Chrome 问题？

Question

单边带有大边框半径的嵌入框阴影是否是 Chrome 问题？

我想知道哪个浏览器是正确的？

在 Chrome 中：

在 Firefox 中：

<div style="
  border-top-left-radius: 100%;
  box-shadow: inset 0px 0px 0 20px red;
  background-color: #ccc;
  width: 200px;
  height: 100px;
"></div>

Answer 1

这似乎是一个 Firefox 问题。对于此示例，我建议您调整 css 以便您可以使用边框。

div{
border-top-left-radius: 100%;
background-color: #ccc;
width: 160px;
height: 60px;
border:20px solid red;
}
p{
border-top-left-radius: 100%;
box-shadow: inset 0px 0px 0 20px red;
background-color: #ccc;
width: 200px;
height: 100px;
}

<p></p>
<div></div>

更新：我也检查了 Safari 和 Opera。看起来是这样的：

-->Safari

--> 歌剧