Box-shadow 在 Chrome 中是黑色，但在 Firefox 中是白色？

Question

其实问题很简单，我的影子在GoogleChrome是黑色，在火狐是白色，应该是黑色的。如果您有不同的意见，请务必说出来，因为我还是一名学生。

这是我的 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>

我的 css div 代码 class rechts:

.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;
}

Answer 1

最好先编写带有前缀的代码，然后再编写无前缀的代码，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;（或者用black代替#000）就可以了。

Answer 2

您有 '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，但我更喜欢将供应商前缀自由行放在末尾。

Box-shadow 在 Chrome 中是黑色，但在 Firefox 中是白色？

Box-shadow is Black in Chrome but White in Firefox?

html

css

firefox

google-chrome

box-shadow