border - box-shadow 和 border 渲染错误

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 重现这种渲染怪异。 (因此不依赖于渲染引擎)

并且它不会发生在较低的 border-radius 上(换句话说，当形状不是圆形时它不会发生)

编辑:

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

Answer 1

绝对看起来像是 box-shadow 中的错误(当使用 spread 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;
}

这是 fiddle :http://jsfiddle.net/eX3cy/1/

编辑:

这是一个调整了模糊和散布的 fiddle (以表明可以实现相同的结果，减去不需要的部分):http://jsfiddle.net/wgpzL/