CSS问题：Hover时仅让Div边框变3px，避免元素及文本缩放

问题根源分析 #

你遇到的核心问题大概率是错误用了transform: scale()来实现边框加粗效果——scale会缩放整个元素（包括容器本身和内部所有内容），这就导致hover时文本和容器一起变大。另外，如果你没设置box-sizing: border-box，直接增加border-width会让容器整体尺寸变大（默认content-box盒模型中，边框是额外计算在宽高之外的），这也可能让你误以为是“缩放”了容器。

至于Bootstrap的影响：Bootstrap全局默认设置了box-sizing: border-box，正常情况下不会因为加边框导致容器尺寸变化。但如果你自己覆盖了这个全局设置，或者误用了Bootstrap的transform相关工具类（比如自定义了hover时的缩放效果），才可能触发这个问题，默认的Bootstrap不会导致这个现象。

纯CSS解决方案 #

我们可以直接修改border-width，配合box-sizing: border-box（如果没被Bootstrap全局设置的话手动加上）来实现需求，完全不需要transform：

1. HTML结构示例 #

<div class="custom-box">
  这是内部文本，hover时我不会缩放
</div>

2. CSS代码实现 #

/* 基础样式 */
.custom-box {
  /* 初始边框设置 */
  border: 1px solid #222;
  /* 确保边框变化不会改变容器尺寸 */
  box-sizing: border-box;
  /* 可选：给容器设置固定宽高，或让内容自适应 */
  width: 240px;
  padding: 1.2rem;
  /* 可选：添加过渡动画让边框变化更平滑 */
  transition: border-width 0.2s ease;
}

/* Hover时仅修改边框宽度 */
.custom-box:hover {
  border-width: 3px;
}

关键要点 #

• box-sizing: border-box：这个属性让元素的宽高包含边框和内边距，修改border-width时，容器整体尺寸不会变化，内部文本也不会被挤压或缩放。
• 别用transform: scale()模拟边框：scale是对整个元素的缩放，会影响所有子元素，完全不符合你的需求。
• 过渡动画（可选）：添加transition属性可以让边框变化更自然，提升交互体验。

排查Bootstrap相关冲突 #

如果你确实在用Bootstrap，检查这两点：

• 有没有自己加过hover:scale-*这类自定义工具类（或第三方扩展的Bootstrap工具类）？有的话移除这类缩放相关的hover样式。
• 有没有覆盖Bootstrap的box-sizing全局设置？可以用浏览器开发者工具查看元素盒模型，确认box-sizing是否为border-box。

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