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

谢谢！

Answer 1

您不应该使用-moz-filter作为箱子阴影。几乎完全支持Support for box-shadow。所有现代浏览器都很好。只需box-shadow是好的。虽然我不确定它会在身体元素上表现如何。

这可能是为什么它不起作用。总是首先包含前缀CSS。无前缀。订单在CSS中很重要。

Answer 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); 
}