ボックスシャドウと境界線の描画バグが

Question

Cssの「バグ」原因：インセットボックスシャドウと周囲の境界線との間に1ピクセル透明の境界線のいくつかの種類があるように見えます

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

を。

私はクロム、FirefoxとIEの最後のリリースとすごみをレンダリングすることを再現することができ、this live exampleを見てください。 （形状が円形でない場合には起こらない、換言すれば）

（従ってエンジン依存レンダリングせず）及びより低い境界半径と起こらない

EDIT：

この問題を解決する方法はありませんでしたが、低い不透明度を使用するとほとんど見えません。 の解決策が現れるまで、私はそのテクニックを使用しています（質問を開いたままにします）。

Answer 1

ボックスシャドーのバグのように見えます（広がったargを使用する場合）。回避策としては、オーバーレイdivを使用するだけです。 CSS

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

：

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/

編集：

はここでぼかしとフィドルだと

HTML：ここでは、コードです調整されたスプレッドも同様に（同じ結果が不要な部分を除いて得られることを示しています）。http://jsfiddle.net/wgpzL/