盒子阴影和边框渲染错误

Question

导致“错误”的 Css：

div {
    width: 100px;
    height: 100px;
    background-color: transparent;
    box-shadow: 0 0 15px 20px #000 inset;
    border: 100px solid #000 ;
    border-radius: 150px;
}

看起来在 inset box-shadow 和周围的边框之间有某种 1px 的透明边框。

看看this live example，我可以在 Chrome、Firefox 和 IE 的最新版本中重现这种渲染怪异。 （因此不依赖于渲染引擎）

并且它不会发生在较低的边界半径（换句话说，它不会发生在形状不是圆形时）

编辑：

我没有找到让这个东西消失的方法，但是使用低不透明度使它几乎不可见。在真正的解决方案出现之前，我将使用该技术（并让问题悬而未决）。

Answer 1

绝对看起来像 box-shadow 中的错误（使用扩展 arg 时）。作为一种解决方法，只需使用覆盖 div。代码如下：

html:

<div></div>
<div class="overlay"></div>

css:

div {
    margin:10px;
    width: 100px;
    height: 100px;
    background-color: transparent;
    box-shadow: 0 0 15px 20px #000 inset;
    border: 100px solid #000 ;
    border-radius: 150px;
}
div.overlay {
    margin-top:-310px;
}

这是小提琴：http://jsfiddle.net/eX3cy/1/

编辑：

这里也调整了模糊和散布（以表明可以实现相同的结果，减去不需要的部分）：http://jsfiddle.net/wgpzL/