框阴影和边框渲染错误

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透明边框。

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

下边界半径不会发生（换句话说，当形状不是圆形时不会发生）

修改

我没有办法让这件事情消失，但使用低透明度使它几乎看不见。我将使用该技术（并打开问题），直到真正的解决方案出现。

Answer 1

绝对看起来像箱子阴影中的错误（使用传播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/