CSS：圖片邊框移動它

所以我有我的圖片在我的網頁上。在我的css代碼中，我有一個:hover（發光出現）的過渡，效果很好，我想在:active上添加一個筆劃。這裏是我的代碼：CSS：圖片邊框移動它

#bb 
{ 
    top: 55%; 
    left: 6%; 
    opacity: 0.85; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
} 
#bb:hover 
{ 
    opacity: 1; 
    -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.75); 
    -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.75); 
    box-shadow: 0px 0px 20px rgba(255,255,255,0.75); 
} 
#bb:active 
{ 
    opacity: 1; 
    border: 10px solid rgba(87,87,87,0.8); 
}

我的問題如下：我會得到怎樣的行程出現周圍圖像0不動它，我如何讓它保持「積極」，而無需舉行點擊圖片？

來源

2012-06-07 BDdL

小提琴。如果不移動它，你的意思是什麼。 – SVS

'border'佔用空間 - 試試'outline'？ – 2012-06-07 05:22:29

您可以使用CSS box-sizing：border-box;。像這樣寫：

#bb:active 
{ 
    opacity: 1; 
    border: 10px solid rgba(87,87,87,0.8); 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    box-sizing:border-box; 
}

入住這http://jsfiddle.net/4g6d9/

來源

2012-06-07 05:22:40 sandeep

你，先生，讓我的一天！謝謝！ – BDdL

邊框佔據的空間，所以添加邊框通常取代的元素。如果您使用outline屬性而不是border，則不會發生位移 - 但輪廓將顯示在否則會出現在同一位置的任何內容的頂部，即可能會覆蓋其他內容。

:active的含義在不同的瀏覽器中有不同的解釋。爲了使鍵盤或鼠標事件發生特定的事情（如儘可能跨瀏覽器），您需要使用JavaScript。

來源

2012-06-07 05:23:10

感謝精確的邊界輪廓屬性！ – BDdL

CSS：圖片邊框移動它

回答

相關問題