Question

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

如果您在Chrome中查看此内容，则可以。但是，Firefox会在#navigation元素的顶部添加一个不需要的边框。我可以通过设置负展开半径来摆脱它，但这会拧紧我的圆角。

有什么想法吗？

谢谢，蒙蒂

Answer 1

这是小提琴：

将此更改为影子类：

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扩展来支持旧版本。盒子大小与我的实际应用程序混乱，因此我将它们保留原样（因此省略了这些规则）。

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

谢谢，蒙蒂

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

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

阴影的水平偏移，正数表示阴影位于框的右侧，负偏移表示阴影位于框的左侧。
阴影的垂直偏移量，负值表示盒子阴影将位于框的上方，正值表示阴影将位于框的下方。
模糊半径（可选），如果设置为0，阴影将变得清晰，数字越大，模糊程度越高。
展开半径（可选），正值会增加阴影的大小，负值会减小尺寸。默认值为0（阴影与模糊大小相同）。
颜色

Firefox中的CSS box-shadow显示微弱的顶部边框/阴影

3 个答案: