按钮悬停动画背景未完全填充、左右留白问题的修复方法咨询

我来帮你搞定这个按钮的悬停问题～ 你遇到的问题核心是盒模型的默认行为导致的，下面一步步给你分析和解决：

问题原因 #

默认情况下，CSS的box-sizing是content-box，这意味着你设置的width:175px只包含按钮的内容区域，不包括.btn1的2px solid #fff边框。所以按钮的实际总宽度是175px + 2px*2 = 179px，当你给按钮添加悬停背景色时，背景只会填充175px的内容区，左右两侧的边框区域就会露出空白，看起来像是背景没填满。

修复方案 #

只需要给按钮添加box-sizing: border-box，让宽度包含边框和内边距，同时完善悬停样式即可：

body { 
  background-color: #4F4BFA; 
} 
.btn1 { 
  border: 2px solid #fff; 
} 
.btn-cmn { 
  width: 175px; 
  height: 52px; 
  background-color: transparent; 
  border-radius: 26px; 
  font-size: 18px; 
  font-weight: 700; 
  line-height: 28px; 
  cursor: pointer;
  /* 添加这行，让宽度包含边框 */
  box-sizing: border-box;
}

/* 补充悬停样式，确保背景填满 */
.btn1:hover {
  background-color: #fff;
  color: #4F4BFA; /* 可选：文字变色，提升对比度 */
}

为什么这样有效？ #

• box-sizing: border-box会让元素的width和height属性包含内容、内边距和边框，这样按钮的总宽度就固定为175px，边框不会额外增加宽度。
• 悬停时设置的背景色会填充整个按钮的内容区+内边距区域，而边框会覆盖在背景之上，看起来整个按钮都被背景填满了，不会有左右空白。

内容的提问来源于stack exchange，提问作者Pramod