最新版本中的 Firefox 盒子阴影更轻

Posted 2023-03-06

【中文标题】最新版本中的 Firefox 盒子阴影更轻

【英文标题】：Firefox box shadow much lighter in latest build

【发布时间】：2016-06-06 16:15:32

【问题描述】：

我发现 Firefox (44.0.2) 正在渲染 box-shadow CSS 非常微弱/明亮。

如果您比较 Chrome 和 Firefox 之间的差异，它在 Firefox 中看起来要轻得多。 https://jsfiddle.net/8db8zr6q/

我想知道以前是否有人遇到过这个问题，是否有什么办法可以解决这个问题？

当前代码：

.shadow 
  height: 400px;
  -webkit-box-shadow: inset 0px -200px 101px -52px rgba(0,0,0,1);
  -moz-box-shadow: inset 0px -200px 101px -52px rgba(0,0,0,1);
  box-shadow: inset 0px -200px 101px -52px rgba(0,0,0,1);

问题图片：

【问题讨论】：

Firefox 似乎（错误地）根据框的尺寸剪裁了嵌入阴影。传播半径似乎也偏离了。

@BoltClock 你能证实你说的是带有 W3C 定义的 firefox 吗？ w3.org/TR/2010/WD-css3-background-20100612/box-shadow.src.html 我认为 Firefox 的行为非常不公平，因为大多数时候是 chrome 制作谷歌想要的而不是标准建议。谢谢。

@Marcos Pérez Gude：来自w3.org/TR/css3-background/#shadow-shape（不知道您为什么要链接到较旧的草稿）：“内部框阴影投射阴影，就好像填充边缘之外的所有东西都是不透明的。 "这意味着不应该发生任何剪辑（“敲除”）。在此示例中，这意味着在框的底部边缘附近不应有第二个渐变，如 Firefox 所示 - 它应该是纯黑色，如 Chrome 所示。

现在很清楚了。在这种情况下，你是对的。谢谢！！！

看起来问题出在 inset 属性上。如果我删除插图，阴影会更暗。虽然它对我没有多大帮助，因为我需要插入值！我还应该说它在 IE 和其他 Firefox 版本中运行良好。我之前使用的版本 (43.0.1) 渲染了 box-shadow。

【参考方案1】：

我遇到了这个问题，经过长时间的研究，我没有找到直接的答案，所以使用 hack 的工作是通过玩弄值来定位 -moz-box-shadow 前缀，直到我得到我想要的阴影，在开发时我发现 Firefox 的网站呈现的某些内容与您的意图不同

【讨论】：

您能说得更具体一点吗？您的回答更像是评论。