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

谢谢！

Answer 1

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

这可能就是为什么它不起作用。始终首先包含前缀CSS。最后没有前缀。订单在CSS中很重要。

Answer 2

box-shadow和drop-shadow不是一回事。 box-shadow是...... box-shadow。 drop-shadow是filter属性的值之一。如Can I Use所示，Firefox完全支持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);
}

Mozilla的Box-Shadow无法正常工作

2 个答案: