CSS:图像周围的边框移动它

Question

所以我的网页上有我的图片。在我的 CSS 代码中，我有一个 :hover 的过渡(出现发光)，效果很好，我想在 :active 上添加一个笔画。这是我的代码:

#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);
}

我的问题如下:如何在不移动图像的情况下让笔划出现在周围，以及如何让它保持“事件”状态而不必按住图片？

Answer 1

您可以使用 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/