1

我有这个 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”不起作用？

谢谢！

4

2 回答 2

0

你不应该使用-moz-filter盒子阴影。几乎完全支持对 box-shadow的支持。所有现代浏览器都可以使用。刚刚box-shadow好。虽然我不确定它在 body 元素上的表现如何。

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

于 2016-02-29T21:20:55.973 回答
0

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

因此，您只需更改前缀并删除，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);
}
于 2016-03-01T10:21:24.807 回答