Mozilla 的 Box-Shadow 不工作答案

【问题标题】：Box-Shadow for Mozilla not workingMozilla 的 Box-Shadow 不工作
【发布时间】：2016-02-29 20:58:46
【问题描述】：

我有这个 CSS 代码，但影子的东西在 Mozilla Firefox 中不起作用：

body {
    text-align: center;
    font-family: Sans-serif;
    background-image: url("d3.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    box-shadow: 1px 1px 1px grey;
    -moz-filter: drop-shadow(1px 1px 1px grey);
    -webkit-filter: drop-shadow(1px 1px 1px grey);
}

在 Chrome 中看起来非常好，身体中的所有元素都有某种阴影，我也想在 Mozilla 中实现这一点。我该怎么做呢？为什么“moz”不起作用？

谢谢！

【问题讨论】：

all elements in body have a shadow 但你只在body上使用它
对不起什么？是的，我只在 body 上使用它，它适用于所有元素（在 Chrome 中）。

标签： css mozilla shadow box-shadow

【解决方案1】：

您不应该将-moz-filter 用于box-shadow。 Support for box-shadow 几乎完全受支持。所有现代浏览器都很好。只需box-shadow 就可以了。虽然我不确定它在 body 元素上的表现如何。

这可能是它不起作用的原因。始终首先包含前缀 CSS。最后无前缀。顺序在 CSS 中很重要。

【讨论】：

【解决方案2】：

box-shadow 和 drop-shadow 不是一回事。 box-shadow 是，嗯...box-shadow。而drop-shadow 是filter 属性的值之一。正如Can I Use 中所见，filter 完全被 Firefox 支持，并且不需要前缀即可使用它。

所以你只需要更改前缀并删除box-shadow，因为它是另一个不相关的属性：

body {
    text-align: center;
    font-family: Sans-serif;
    background-image: url("d3.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    filter: drop-shadow(1px 1px 1px grey);
    -webkit-filter: drop-shadow(1px 1px 1px grey);
}

【讨论】：