html - border-radius with box-shadow inset 像素化/粗糙

Question

如果您看不到这个问题，请尝试查看此 codepen ，到这里你应该明白我的意思了。

我尝试了几种方法来修复它。在下面的评论中，您可以看到其中之一。它似乎仍然在 适当的 border 和 dropped shadow 之间呈现 1px 粗糙的边框。

如果它依赖于浏览器渲染器那么它是一个错误吗？如何为所有现代 浏览器正确修复它。

html{
  background-color: #554343;
}
div{
  display: block;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border-radius: 50%;
  border-width: 0;      /* no result
  border-width: 2px;  // uncommented no result
  border-style: solid;// uncommented no result even with inset*/
  background-color: white;
  box-shadow: inset 1px 1px 150px, inset -1px -1px 150px;
}

<div>
</div>

编辑:也尝试过这种方式但没有积极的结果:

html{
  background-color: #554343;
}
.container{
  display: block;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border-radius: 50%; /* tried 49.5% but it's not acceptable */
  box-shadow: inset 1px 1px 150px #000, inset -1px -1px 150px #000;
}
.content{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: white;
  z-index: -1;
}

<div class="container">
  <div class="content">
  </div>
</div>

Answer 1

https://code.google.com/p/chromium/issues/detail?id=442335

似乎打开了 Chrome 错误。我无法为您的案例提出解决方案。如果您希望尽快修复此问题，请在错误跟踪器上投票!