Box-shadow在Chrome中爲黑色，而在Firefox中爲白色？

其實問題很簡單，我的影子在谷歌瀏覽器中是黑色的，在Firefox中是白色的，它應該是黑色的。如果你有不同的意見，請說出來，因爲我還是個學生。Box-shadow在Chrome中爲黑色，而在Firefox中爲白色？

這是我的HTML代碼：（這是荷蘭人，但它只是讓你可以看到無政府狀態。）

<div class="rechts"> 
    <h2>IN DE SPOTLIGHTS</h2> 
    <p>Zondag 13 oktober beginnen we met ons nieuwe jaar! We starten om 13u30 en iedereen is natuurlijk meer dan welkom! KSA Scherpenheuvel is ook te vinden op <a href="https://www.facebook.com/pages/KSA-Scherpenheuvel/1065425993472427?fref=ts" style="color: black">facebook</a>!</p> 

    <h2>FOTOMOMENT</h2> 
    <p><img src="images/groepsfoto.jpg" width="400px" alt="foto niet beschikbaar" /><br /> Groepsfotooooo!</p> 

    <h2>EXTRA</h2> 
    <p><a href="baby.html" style="color: black;">babysitter nodig</a></p> 
</div>

與rechts類的div我的CSS代碼：

.rechts{ 
    position:absolute; 
    right:10px; 
    top:500px; 
    background-color:#4CAD5D; 
    width: 450px; 
    border-radius:4px ; 
    box-shadow: 0 10px 7px #fff; 
    -webkit-box-shadow: 0 10px 7px black; 
    -moz-box-shadow: 0 10px 7px black; 
    text-align: center; 
}

來源

2015-11-08 Dries Jans

box-shadow：0 10px 7px #fff; < - 那是白色的。使用＃000 – AtheistP3ace

我從不使用＃000或#fff，我只寫黑色或白色：不可能有混淆。 – frenchie

您有'box-shadow'，然後與供應商前綴相同。第一個盒子陰影裏有白色的。

更改此：

.rechts { 
    box-shadow: 0 10px 7px #fff; 
    -webkit-box-shadow: 0 10px 7px black; 
    -moz-box-shadow: 0 10px 7px black; 
}

要這樣：

.rechts { 
    -webkit-box-shadow: 0 10px 7px #000; 
    -moz-box-shadow: 0 10px 7px #000; 
    box-shadow: 0 10px 7px #000; 
}

您可以使用黑色或＃000，但我更傾向於將供應商，無前綴線末。

來源

2015-11-08 01:18:50 shirfy

我已將其更改，但尚未正常工作。 –

對不起，我在錯誤的地方編輯代碼（愚蠢的我）感謝很多:) –

這是一個很好的做法，先用前綴編寫代碼，然後前綴前綴，然後IE：

-webkit-box-shadow: 0 10px 7px black; 
-moz-box-shadow: 0 10px 7px black; 
box-shadow: 0 10px 7px #fff;

這裏的問題是你的前綴box-shadow是#fff，它等於白色。某些瀏覽器（取決於版本等）將使用前綴版本，即使前綴版本出現在前綴版本之後。

將其更改爲box-shadow: 0 10px 7px #000;（或代替#000使用black），你會好的。

來源

2015-11-08 01:18:01 L84

我已將它全部更改爲黑色，並且帶有前綴的代碼首先是 –

Box-shadow在Chrome中爲黑色，而在Firefox中爲白色？

回答

相關問題