FirefoxのCSS3ボックスシャドウレンダリングの問題

Question

ボックスシャドウがfirefoxで正しく表示されない（v49で観察された）。

のCss：

.block { 
    width: 90px; 
    height: 90px; 
    box-shadow: 0 0 0 1px #0084A3; 
    border-radius: 100%; 
} 

それは非対称的レンダリングとウィンドウの高さに依存します。 こちらはfiddleです。ウィンドウを垂直方向にサイズ変更して、ボックスシャドウに何が起きているのかを確認してください。このようなことを達成するのは簡単です： invalid box-shadow rendering。トップシャドウがボトムよりはるかに広いことが分かります。

ChromeとSafariでうまく処理できます。

私は有用なアイディアを感謝します。

Answer 1

box-shadow: inset 0 0 0 1px #0084A3;を使用してください。これは、FirefoxとChromeの両方のブラウザで同じ出力を表示します。

Answer 2

試すFirefoxの場合-moz-box-shadow: 0 0 0 1px #0084A3;;

Answer 3

サンは、デフォルトではCSS3で影の2種類 1.インナー（挿入図） 2.外（デフォルト）

ので、それがあるがあります。..

右しかし、単に詳細のためでありますインセットプロパティが指定されていない場合は、アウターシャドウを取得します。

はめ込み

（デフォルト）を指定しない場合、影が（ボックスがコンテンツの上に上昇した場合と同様）、ドロップシャドウであると仮定されます。

insetキーワードがあると、フレーム内の影が1つに変わります（あたかもコンテンツがボックスの中に入っているかのように）。インセットされた影は、境界線（透明なものも含む）の内側、背景の上、しかし内容の下に描画されます。

詳しくはlinkをご確認ください。