火狐大綱圍繞懸停框陰影

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或任何其他標記。

希望有所幫助。