框阴影和边框渲染错误

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;
}

看起来插入框阴影和周围边框之间有某种 1px 的透明边框。

看看这个活生生的例子，我可以用最新版本的 Chrome、Firefox 和 IE 重现这种渲染怪异的情况。（因此不依赖于渲染引擎）

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

编辑：

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

Answer 1

绝对看起来像 box-shadow 中的一个错误（使用传播参数时）。作为解决方法，只需使用覆盖 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/