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