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：图片边框移动它

回答

相关问题