border-radius with box-shadow inset pixelized / rugged

Question

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

我尝试了几种方法来修复它。在评论下面你可以看到其中一个。仍然似乎在正确边框和投影之间呈现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错误。我无法为你的案子提出解决方案。如果您希望尽快修复错误跟踪器，请将此问题投票！