Css Firefox在悬停状态下框阴影周围的轮廓

这是我关于StackOverflow的第一个问题，所以我将尝试以正确的方式格式化它

基本上，我有一个带边框和轮廓的div。悬停时，div也会得到一个阴影，当然，它应该在轮廓之外。 除了firefox，这在所有浏览器中都很好。Firefox似乎出于某种原因渲染了框外阴影的轮廓。 这里可以看到一个例子：

这是我的CSS：

.block {

    background: #eceeeb;
    border: 3px solid white;
    outline: 2px solid lavender;
    width: 240px;
    padding: 10px;
    float: left;
    height: 130px;
    margin: 40px;
    text-align: center;
    cursor: default;
    -moz-transition: background 0.7s, -moz-box-shadow 0.3s;
    -webkit-transition: background 0.7s, -webkit-box-shadow 0.3s;
    -o-transition: background 0.7s;
    transition: background 0.7s, box-shadow 0.3s;

}

.block:hover {

    background: whitesmoke;
    -webkit-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.30);
    -moz-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.30);
    box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.30);

}

我似乎找不到解决这个问题的正确方法

---

请原谅我的中等英语，它不是我的主要语言。

你可以嵌套

div

s，以产生与大纲相同的效果：

<div class='outline'>
    <div class="block">Test</div>
</div>

---

正如其他人在评论中所说，你并不是真的为了它的预期目的而使用了

大纲-

，它并不意味着被当作一个额外的边框，以防标准边框对你来说不够好；它有自己存在的理由，也有自己的语义。我建议根本不要用这种方式

所以你问你可以用什么来代替

• 边框图像

  ：
  最近的浏览器都支持一个名为

  边框图像

  的功能，该功能允许您根据需要定义边框的外观。您可以在边框中指定所需的任何图像，因此，您可以设计边框，使其看起来与您拥有的方式相同（甚至更复杂），而无需使用

  轮廓

  样式
  缺点是IE不支持它（甚至连IE10都不支持），所以你需要依靠你的

  outline

  解决方案。但是您可以使用Modernizer之类的工具来对

  边框图像

  进行特征检测，并且只有在

  边框图像

  不受支持的情况下才返回到

  轮廓

  • 参考：
  • 示例：
  • 浏览器支持：

• ：带边框的
  之前或
  ：之后
  
  ：before
  和
  ：after
  伪选择器允许您仅使用CSS在给定元素之前和之后创建附加元素
  
  您可以使用这两种方法中的任何一种来创建一个带有
  边框的元素，这将再次为您解决问题，而无需使用
  大纲或任何其他标记
  

---

希望对您有所帮助。

outline

通常用于显示对某个元素的关注，firefox正在勾勒包含框阴影的整个元素。我建议避免使用

outline

，因为默认行为因浏览器而异。谢谢您的评论。有没有办法模仿轮廓的外观？实际上，您可以尝试使用

轮廓偏移量

来查看是否有任何效果。尝试添加

轮廓偏移量：0px非常感谢。你和鲍威尔·伊恩的答案都很有用。我最终还是用了伊恩的方法，所以我选择了他的方法作为答案。谢谢。最后我用它做了两个项目。
.block {
    position:absolute;
    top:0px;
    left:0px;
    background: #eceeeb;
    border: 3px solid white;
    width: 234px;
    padding: 10px;
    float: left;
    height: 124px;
    text-align: center;
    cursor: default;
    -moz-transition: background 0.7s, -moz-box-shadow 0.3s;
    -webkit-transition: background 0.7s, -webkit-box-shadow 0.3s;
    -o-transition: background 0.7s;
    transition: background 0.7s, box-shadow 0.3s;
}

.outline {
    position:relative;
    border: 2px solid lavender;
    width: 240px;
    padding: 10px;
    float: left;
    height: 130px;
    margin: 40px;
}