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中为白色？

回答

相关问题