CSS box-radius ruinsボックスシャドーインセット効果がfirefoxにある

Question

私は丸い上部コーナーでスタイルを設定したいdivタグを持っています。そして、私はbox-radiusの問題に直面しています。

.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    -webkit-box-shadow: inset 0 20px 3px 1px #4D7594; 
 
    box-shadow: inset 0 20px 3px 1px #4D7594; 
 
    border-radius: 15px; 
 
}

<div class="box"> 
 
</div>

さて、これまでのところ良い作品。しかし、このサンプルでは、​​pxをborder-radiusに追加すると、box-shadowのインセットが破られます。

.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    -webkit-box-shadow: inset 0 20px 3px 1px #4D7594; 
 
    box-shadow: inset 0 20px 3px 1px #4D7594; 
 
    border-radius: 16px; 
 
}

<div class="box"> 
 
</div>

あなたは.boxの上部領域にその影が欠けているようだということに気づくことがあります。この現象は、firefoxでのみ発生します。現在、私はfirefox 45.0.1を使用しています。 2つの影の設定

Answer 1

は、この時点でそれを修正するようだ：

.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    -webkit-box-shadow: inset 0 20px 3px 1px #4D7594; 
 
    box-shadow: inset 0 18px #4D7594, inset 0 20px 3px 1px #4D7594; 
 
    border-radius: 16px; 
 
}

<div class="box"> 
 
</div>