火狐大纲围绕悬停框阴影

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

你可以只窝div s到给作为轮廓相同的效果：

<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

正如别人已经指出评论，你没有真正使用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或任何其他标记。

希望有所帮助。