CSS Firefox 框阴影和轮廓答案

【问题标题】：CSS Firefox box-shadow and outlineCSS Firefox 框阴影和轮廓
【发布时间】：2013-03-12 20:07:01
【问题描述】：

我已经在我的 CSS 代码中的 div 中添加了轮廓和框阴影。
该 div 在 Chrome 和 IE 上看起来很棒，但在 Firefox 中却不行：
铬和 IE： http://i.phirune.com/csrjfyqoczob

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;
}

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

【问题讨论】：

标签： css firefox

【解决方案1】：

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

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

你可以随心所欲地添加。

【讨论】：

我试过了，没用。更糟糕的是，我不知道为什么添加阴影会修复这样的错误？？
天哪。你的意思是用阴影完全替换轮廓？确实很棒！
盒子阴影只能出现在元素下方，而轮廓出现在顶部，这通常是所需的行为。
@aaaidan - 这不是真的。请注意，他向盒子阴影传递了 4 个参数。第 4 个是“扩展”值（可选）。这会将盒子阴影扩展到元素之外。如果您指的是页面上的其他项目，那么您还可以添加相对于元素的位置，使其阴影位于相邻 HTML 元素的顶部。
是的，我熟悉非常方便的“扩展”值。已经有一段时间了，但我想我的意思是阴影不能出现在元素本身（或其子元素）之上。当您使用轮廓时，它总是显示为覆盖。如果您希望轮廓位于元素的边界内，这会很有用，看起来更整洁。

【解决方案2】：

这是一个 Firefox 错误。你只能绕过它。票还在直播中，您可以在：https://bugzilla.mozilla.org/show_bug.cgi?id=480888

【讨论】：

我刚刚在编写 HTML5 计算器时发现了这个错误。我想用outline 来表示键盘焦点，用方框阴影来表示鼠标悬停，但在FF 中失败了。

【解决方案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/

【讨论】：

我只是希望支持现代浏览器。
然后我会查看 css3 文档
我遇到了完全相同的问题...@PhiRune，你能解释一下解决了什么问题吗？顺便说一句，您应该将此问题标记为已回答:)