悬停时围绕框阴影的 Firefox 轮廓

Question

这是我在 StackOverflow 上的第一个问题，所以我会尝试以正确的方式对其进行格式化。

基本上，我有一个带有边框和轮廓的 div。悬停时，div 也会得到一个阴影，当然，它应该在轮廓之外。 这适用于所有浏览器，除了 Firefox。由于某种原因，Firefox 似乎在框阴影之外渲染了轮廓。 可以在这里看到一个例子：http://rubencoolen.be/test.php

这是我的 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);

}

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

请原谅我的英语不太好，这不是我的主要语言。

Answer 1

您可以嵌套divs 以提供与轮廓相同的效果：

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

然后添加更改css：

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

This works in both latest versions of Chrome and Firefox

Answer 2

正如其他人在 cmets 中所说，您并没有真正将 outline 用于其预期目的 - 它并不意味着被视为额外的边界，以防标准边界对您来说不够好；它有它自己存在的理由，也有它自己的语义。我建议不要以这种方式使用它。

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

• border-image:

  最近的浏览器都支持一个名为border-image 的功能，它允许您根据需要定义边框的外观。您可以在边框中指定您想要的任何图像，因此您可以设计边框以使其看起来像您拥有的那样（甚至更复杂），而根本不需要诉诸outline 样式。

  不利的一面是 IE 不支持它（甚至 IE10 也不支持），因此您需要使用 outline 解决方案。但是您可以使用 Modernizr 之类的工具对 border-image 进行特征检测，如果不支持 border-image，则仅回退到 outline。

  • 参考：https://developer.mozilla.org/en-US/docs/CSS/border-image
  • 示例：http://www.sitepoint.com/css3-border-image/
  • 浏览器支持：http://caniuse.com/border-image

• :before 或 :after 带边框。

  :before 和 :after 伪选择器允许您仅使用 CSS 在给定元素之前和之后创建附加元素。

  您可以使用其中任何一个来创建一个带有border 的元素，这将为您解决问题，同样无需使用outline 或任何其他标记。

希望对您有所帮助。