Firefox 中的 CSS box-shadow 显示模糊的顶部边框/阴影答案

【问题标题】：CSS box-shadow in Firefox showing faint top border/shadowFirefox 中的 CSS box-shadow 显示模糊的顶部边框/阴影
【发布时间】：2012-06-27 21:50:33
【问题描述】：

我已经设置了一个示例来说明我的问题： http://jsfiddle.net/XZeYK/5/

如果您在 Chrome 中查看此内容，则很好。然而，Firefox 在#navigation 元素的顶部添加了一个不需要的边框。我可以通过设置一个负的传播半径来摆脱它，但这会搞砸我的圆角。

有什么想法吗？

谢谢，蒙蒂

【问题讨论】：

标签： html css

【解决方案1】：

这是小提琴：

http://jsfiddle.net/XZeYK/15/

将此更改为影子类：

box-shadow: 1px 4px 4px -1px gray;

而且我认为不需要 mozilla 或 webkit 相关的 CSS。

【讨论】：

感谢 SVS - 正如我所想，需要进行一些调整。请参阅我自己的最终 CSS 答案。

【解决方案2】：

我最终为 .shadow 类选择了以下内容：

box-shadow: 3px 4px 4px -2px gray;
-moz-box-shadow: 3px 4px 4px -2px gray;
-webkit-box-shadow: 3px 4px 4px -2px gray;
... <IE specific rules>...

需要 -moz 和 -webkit 扩展来支持旧版本。 box-sizing 与我的实际应用程序相混淆，所以我将它们保持原样（因此省略了这些规则）。

我会将两者都标记为已接受，因为您都帮助了我。

谢谢，蒙蒂

【讨论】：

【解决方案3】：

您好，实际上是由于您定义的 box-shadow，所以我只是降低了您的 box-shadow 属性的 blur 值，现在它可以正常工作了。

CSS

.shadow {
    -moz-box-shadow: 0px 3px 4px -1px gray;
    -webkit-box-shadow: 0px 3px 4px -1px gray;
    box-shadow: 0px 3px 4px -1px gray;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#808080')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#808080');
}

我希望这将帮助您查看演示：-

http://jsfiddle.net/XZeYK/18/

我们可以定义 box-shadow 属性的五个值：-

AS 示例：-moz-box-shadow: 3px 3px 5px 6px #ccc;

阴影的水平偏移量，正数表示阴影在盒子的右边，负数表示阴影在盒子的左边。
阴影的垂直偏移量，负数表示 box-shadow 将在 box 上方，正数表示阴影将在 box 下方。
模糊半径（可选），如果设置为0阴影会很锐利，数字越大，越模糊。
传播半径（可选），正值增加阴影的大小，负值减小大小。默认为 0（阴影与模糊大小相同）。
颜色

【讨论】：

它仍然在导航上显示顶部阴影，当您将其设置为“0”时，左侧阴影完全向右移动
请检查更新的答案，说明问题出现的原因@SVS
@ShailenderArora 杀死阴影效果。
@SVS 我认为这是我们的宗旨是提供问题的解决方案并给出问题出现的原因，所以我认为有时我们会给出问题的附近但不确切的人应该理解为什么会出现问题，所以我认为很清楚为什么会出现问题，你的答案也很好，我的答案是我认为我们其他人也已经给出了一个想法，所以现在让副总裁知道他如何玩花样。 .....