CSS box-shadow在Firefox和Chrome上呈現不同

我在考慮依靠box-shadow，但即使在Firefox和Chrome/Chromium上呈現出不同的呈現方式。差異很小，值很低，但在較大值時非常明顯。CSS box-shadow在Firefox和Chrome上呈現不同

在this example中，可以看到使用負值使陰影變小時會出現差異。左渲染是鉻25，右邊是火狐21

HTML：

<div> 
    Hello there! 
</div>

CSS：

div{ 
    margin:100px; 
    padding:100px; 
    border:1px solid red; 
    box-shadow:0 80px 15px -85px #000; 
}

Differences with Chromium and Firefox, first example

我怎樣才能解決這個問題呢？或者，也許我現在應該放棄box-shadow？

來源

2013-07-04 Jorge Suárez de Lis

瀏覽器

使用不同的算法來生成陰影模糊，在鉻陰影像素的不透明度從陰影區域到外的內邊緣更迅速減小，並且由於陰影的內三分之一是在此示例中隱藏在框下方，它看起來具有不同的起始顏色。如果我們通過將模糊半徑和負向散佈距離減少5px來使模糊完全可見，並用半透明rgba（）替換實心陰影顏色，則渲染差異變得不太重要（）。

來源

2013-07-04 09:34:22

謝謝，這看起來很有希望！由於我必須調整幾個陰影，不過，應該花一些時間來檢查這個陰影。 –

這種方法就像一個魅力！謝謝！：d –

嘗試使用Firefox的-moz-box-shadow屬性，它會渲染得更好。

div{ 
    margin:100px; 
    padding:100px; 
    border:1px solid red; 
    -moz-box-shadow: 0 80px 15px -85px #000; 
    box-shadow:0 80px 15px -85px #000; 
}

來源

2013-07-04 08:50:03

'-moz-box-shadow'似乎在Firefox 21中完全被忽略:( –

把-moz-box-shadow放在正常的box-shadow之上，然後它應該可以正常工作，看看我的編輯。 –

它可以工作，但是就像刪除'-moz-box-shadow'一樣，也就是'-moz-box-shadow'似乎對我沒有任何幫助。 –

CSS box-shadow在Firefox和Chrome上呈現不同

回答

相關問題