未知属性“-moz-box-shadow”。声明被删除答案

【问题标题】：Unknown property '-moz-box-shadow'. Declaration dropped未知属性“-moz-box-shadow”。声明被删除
【发布时间】：2020-04-14 19:43:25
【问题描述】：

CSS -moz-box-shadow 突然发生了什么？在我的设计中，Firefox 控制台出现了一个奇怪的问题：

但是根据CSS Box Shadow rules，我遵守了所有规则，然后发生了什么？这是它指向的块：

div.area {
  margin: 2px auto;
  border: 1px solid #ededed;
  -moz-box-shadow: 0 0 2px 0 #ccc;
     -webkit-box-shadow: 0 0 2px 0 #ccc;
     box-shadow: 0 0 2px 0 #ccc;
  margin-top: -80px;
  background-color: #ffffff;
  position: relative;
}

我也尝试了以下方法：

div.area {
      -moz-box-shadow: 0 0 2px #ccc;
         -webkit-box-shadow: 0 0 2px #ccc;
         box-shadow: 0 0 2px #ccc;
}

我使用的是 Mozilla Firefox 20.0。

【问题讨论】：

标签： firefox css

【解决方案1】：

由于 Firefox 对box-shadow 的支持非常好，所以没有理由保留-moz-box-shadow。它在版本 13 中放弃了对前缀的支持，因此如果您真的很担心警告并且不介意失去对旧版本 Firefox 的支持，您可以删除该声明。对于最新版本的 WebKit 浏览器，-webkit-box-shadow 也是如此。

【讨论】：

一个用例是解决旧的 FireFox 性能错误，即大框阴影使滚动变慢（参见 stackoverflow.com/questions/5095253/box-shadow-in-firefox），因为这个错误仍然没有得到解决......跨度>
Mozilla 开发者似乎不喜欢“向后兼容”的概念...
带前缀的属性作为标准的实验性实现，就其本质而言并不意味着向后兼容，因此该论点是无关紧要的。

【解决方案2】：

box-shadow 一年多以前（firefox 4 和 chrome 10）就不需要任何前缀：https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

【讨论】：

【解决方案3】：

在 .css 文件中你只需找到并重播 moz 到 webkit

例子

-moz-box-shadow  **to** -webkit-box-shadow

-moz-border-radius **to** -webkit-border-radius

-moz-border-top-left-radius **to** -webkit-border-top-left-radius

【讨论】：

【解决方案4】：

对于大多数浏览器的最新版本，您不需要使用 -moz-box-shadow。

您可以简单地使用 box-shadow。

在W3Schools了解更多信息

【讨论】：