Firefox中的CSS3盒子陰影渲染問題

Firefox中的盒子陰影呈現不正確（在v49上觀察到）。Firefox中的CSS3盒子陰影渲染問題

的CSS：

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

它呈現不對稱和依賴於窗口高度。這是fiddle。嘗試垂直調整窗口大小，看看盒子陰影發生了什麼。很容易實現這樣的事情： invalid box-shadow rendering。你可以看到頂部陰影比底部陰影寬得多。

Chrome和Safari處理得很好。

我會很感激任何有用的想法。

2016-09-22 Alexey.Z.

請使用box-shadow: inset 0 0 0 1px #0084A3;它在firefox和chrome瀏覽器中都提供相同的輸出。

2016-09-22 05:31:50 San

很好。看起來非常好的解決方法。謝謝！ –

嘗試這個-moz-box-shadow: 0 0 0 1px #0084A3;爲Firefox;

2016-09-22 05:52:02 Abid

'-moz-box-shadow'不再受firefox支持。 –

聖是正確的，但只是爲了更詳細地..

有2型投影的 1.內（插圖） 2.外（默認）

在CSS3

所以，默認情況下它是如果沒有指定插入屬性，則取外部影子。

插圖

如果未指定（默認）中，假定陰影是陰影（如同箱中的內容上面提出）。

inset關鍵字的存在將陰影更改爲幀內的一個陰影（就好像內容在框內被壓下一樣）。插入陰影繪製在邊界內（甚至透明），高於背景，但低於內容。

檢查此link更多詳細信息

2016-09-22 07:23:37

回答