CSS边框属性

Question

我在鼠标悬停的按钮上添加了边框，但这会干扰HTML布局。我怎样才能做到这一点，而不会影响HTML布局？

Answer 1

您可以使用CSS属性box-sizing像这样写：

.child:hover{ 
    border:1px solid green; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    box-sizing:border-box; 
} 

入住这http://jsfiddle.net/zFJHV/1/

或

可以使用

div{ 
border-bottom:1px solid red; 
margin-bottom:-1px; 
} 

编辑：

可能是你可以使用的borderoutline而不是检查：

http://jsfiddle.net/zFJHV/2/

Answer 2

在悬停上，按钮的宽度减少边框x2的像素宽度。

例如，如果按钮是100像素宽，你周围加入1px宽的边框一路，然后悬停在CSS应该是：

width: 98px; 
border: 1px solid #000; 

Answer 3

为什么没有边框那里所有的时间，但最初有它与背景相同的颜色，所以它是有效透明的？

然后只需更改鼠标悬停上的颜色即可。

Answer 4

悬停按钮，添加边框和减少每个宽度和高度2像素。这不会改变布局。

Answer 5

有几种可能的解决方案，其中一些可能在其他答案中发布。

如果您想要边框一直围绕元素，最简单也最简单的方法就是添加轮廓。大纲不会影响元素的流动，但它们不适用于各个方面。 （他们的意图是要用于调试，而不是设计。）

button:hover { outline: 1px solid black; } 

由斯蒂芬妮的解决方案来降低元素的宽度不会移动页面上的其他元素，但因为你正在缩小元素的尺寸，里面的内容会被移动。 （编辑：实际上理论上这可以将一些文本包装到额外的线上，从而将其他元素向下推。）

您可以在sandeep所述（在其原始答案中）设置悬停的负边距，这可以有效地消除元素使用的额外空间。据我所知，这不影响流量，但可能存在边缘情况。

button:hover { border: 1px solid black; margin: -1px; } /* all sides*/ 
button:hover { border-bottom: 1px solid black; margin-bottom: -1px; } /* bottom only */ 

另一种解决方法是将边框设置为与背景颜色相同（如Sir Crispalot所示），或者您可以将其设置为透明。然后更改悬停时的颜色。使它透明可以在任何颜色背景下工作，但元素的背景颜色（您的案例中的按钮）将显示出来。

/* for a patterned page background: */ 
button { border-bottom: 1px solid transparent; } 
button:hover { border-bottom: 1px solid black; } 

/* or, if the button has a background colour: */ 
button { border-bottom: 1px solid #fff; } 
button:hover { border-bottom: 1px solid black; }