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

Question

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

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

有任何想法吗？

谢谢，蒙蒂

Answer 1

这是小提琴：

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

将此更改为影子类：

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

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

Answer 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 与我的实际应用程序混淆了，所以我将它们保持原样（所以省略了这些规则）。

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

谢谢，蒙蒂

Answer 3

嗨，实际上它是由于您定义的box-shadow ，所以我只是减少了 box-shadow 属性的模糊值，现在它工作正常。

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属性的五个值：-

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

1. 阴影的水平偏移量，正数表示阴影在盒子的右边，负数表示阴影在盒子的左边。

2. 阴影的垂直偏移量，负数表示 box-shadow 将在 box 上方，正数表示阴影将在 box 下方。

3. 模糊半径（可选），如果设置为 0，阴影会很锐利，数字越大，越模糊。

4. 散布半径（可选），正值增加阴影的大小，负值减小大小。默认值为 0（阴影与模糊大小相同）。

5. 颜色