如何为按钮设置可显示下层元素背景的transparent border，hover加边框无位移

方案1：使用box-shadow模拟边框（最推荐，兼容性好无额外适配成本） #

该方案完全不占用文档流空间，不会触发元素位移，而且会自动适配按钮的圆角属性，默认状态下无额外样式干扰，边框区域完全透出下层背景。
代码示例：

.custom-btn {
  /* 保留原有按钮样式，无需修改布局相关属性 */
  border-radius: 8px;
  background: #fff;
  padding: 6px 12px;
  border: none;
  transition: all 0.2s ease;
}
.custom-btn:hover {
  /* 第四个参数为边框宽度，第五个为边框颜色 */
  box-shadow: 0 0 0 2px #1677ff;
}

如果需要边框展示在按钮内部，给box-shadow添加inset属性即可：box-shadow: inset 0 0 0 2px #1677ff;

方案2：修改background-clip配合透明边框（适合需要真实border属性的场景） #

你之前用透明边框透出按钮自身背景的问题，是因为浏览器默认background-clip为border-box，按钮背景会延伸到边框区域下方，只要把背景裁剪范围改到padding区域即可解决。
代码示例：

.custom-btn {
  border-radius: 8px;
  background: #fff;
  padding: 6px 12px;
  /* 提前预留border位置，避免hover时位移 */
  border: 2px solid transparent;
  /* 背景仅渲染到padding区域，边框区域透出下层背景 */
  background-clip: padding-box;
  transition: all 0.2s ease;
}
.custom-btn:hover {
  border-color: #1677ff;
}

注意：如果你的按钮原有padding是按无边框状态设计的，用该方案需要把原有padding减去对应边框宽度，避免按钮整体尺寸变大

方案3：使用outline属性（现代浏览器兼容） #

outline默认不占用布局空间，新版本Chrome、Firefox、Safari都已经支持outline跟随元素圆角渲染：

.custom-btn:hover {
  outline: 2px solid #1677ff;
  outline-offset: -2px; /* 负值代表边框在元素内部，正值代表边框在元素外部 */
}

注意：低版本Edge、Safari不支持outline圆角适配，优先选择前两个方案

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