CSS Firefox 盒阴影和轮廓线

Question

我在CSS代码中为一个div添加了轮廓和盒子阴影。 在Chrome和IE上，这个div看起来很棒，但在Firefox中却不行。

Chrome和IE： http://i.phirune.com/csrjfyqoczob FireFox: http://i.phirune.com/4gsrrub3ww6e CSS代码如下：

#container {
width:960px;
margin:0px;
padding:0px;
margin-left:auto;
margin-right:auto;
margin-top:-10px;
background-color: #415475;
-moz-box-shadow: 0 0 25px 25px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 25px 25px rgba(0,0,0,0.2);
box-shadow: 0 0 25px 25px rgba(0,0,0,0.2);
outline:#000000 solid thick;
}

我不知道如何修复这个问题，任何见解都将不胜感激。

- PhiRune

Answer 1

为什么不使用多个盒子阴影？只需用逗号分隔您的盒子阴影即可。

box-shadow:
    0px 0px 0px 1px #fff,
    0px 0px 0px 2px #606054,
    0px -1px 9px 1px rgba(119, 119, 119, 0.4);

您可以添加任意数量的哈希标签。

- Brian Fegter

---

我尝试了，但它没有起作用。更糟糕的是，我不知道为什么添加阴影会修复这样的错误？ - Cystack

天啊，你的意思是完全用阴影替换轮廓线吗？确实太棒了！ - Cystack

盒子阴影只能出现在元素下方，而轮廓线则出现在上方，这通常是期望的行为。 - aaaidan

@aaaidan - 这不是真的。请注意他向“box shadow”传递了4个参数。第四个参数是“expand”值（可选）。这将扩展元素外部的框阴影。如果您指的是页面上的其他项目，则还可以将相对位置添加到元素上，以使其阴影位于相邻的HTML元素上方。 - Mike McLin

是的，我熟悉非常方便的“expand”值。虽然已经有一段时间了，但我认为我的意思是阴影不能出现在元素本身（或其子元素）之上。当您使用轮廓时，它总是重叠显示。如果您希望轮廓位于元素的边界内，这很有用，看起来更整洁。 - aaaidan

Answer 2

这是一个Firefox的bug。你只能绕过它。该问题仍然存在，你可以在以下链接中查看：https://bugzilla.mozilla.org/show_bug.cgi?id=480888

- Rick Mak

---

我在编写HTML5计算器时发现了一个bug。我想使用outline来指示键盘焦点，使用box shadow来指示鼠标悬停，但在FF中它表现非常糟糕。 - Andreas Rejbrand

Answer 3

-moz-box-shadow: 1px 1px 10px #00f;
-webkit-box-shadow: 1px 1px 10px #00f;
box-shadow: 1px 1px 10px #00f;

你们尝试支持哪些浏览器版本？现代浏览器支持CSS3，您无需进行CSS hack。

这里有一些关于阴影的CSS3文档：http://www.css3.info/preview/box-shadow/。

- jsteinmann

---

我只是想支持现代浏览器。 - PhiRune

我会查看CSS3文档。 - jsteinmann

我正在经历完全相同的问题... @PhiRune，你能解释一下是什么解决了它吗？顺便说一句，你应该将这个问题标记为已回答 :) - Charleshaa