Box-Shadow for Mozilla不工作

Question

我有这段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中实现这一点。我该怎么做呢？为什么“蚊子”不起作用？

谢谢!

Answer 1

你不应该为长方体阴影使用-moz-filter。几乎完全支持Support for box-shadow。所有现代浏览器都可以正常运行。只要box-shadow就行了。虽然我不确定它在body元素上的表现如何。

这可能就是它不起作用的原因。始终首先包含带前缀的CSS。末尾去掉前缀。在CSS中，顺序很重要。

Answer 2

box-shadow和drop-shadow不是一回事。box-shadow是嗯..。box-shadow。drop-shadow是filter属性的值之一。正如在Can I Use中看到的，火狐完全支持filter，并且不需要前缀就可以使用它。

因此，您只需更改前缀并删除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);
}