如何解决为div添加border边框时内部元素发生位移的问题

默认状态下.container没有设置边框，hover时新增的2px边框会额外占据页面空间，触发元素重排，导致内部内容偏移。

方案1：初始预留透明边框（改动最小，兼容性最好） #

给默认状态的.container添加和hover时同宽度的透明边框，提前占好边框的位置，hover时仅修改边框颜色即可，不会触发重排：

.container {
  display: inline-flex;
  align-items: center;
  /* 新增以下两行，提前预留边框位置和圆角 */
  border: 2px solid transparent;
  border-radius: 15px 5px 5px 15px;
}

/* hover样式仅保留边框颜色修改即可 */
.container:focus,
.container:hover {
  border-color: #419BF9;
}

该方案完全保留你需要的边框样式、圆角效果，无兼容性问题，优先推荐使用。

方案2：用不占空间的样式模拟边框 #

如果不想额外预留边框位置，可选择用默认不占据文档流的属性实现边框效果，不会触发重排：

用outline实现 #

.container:focus,
.container:hover {
  outline: 2px solid #419BF9;
  outline-offset: -2px; /* 负数值让outline向内贴合，适配圆角效果 */
  border-radius: 15px 5px 5px 15px;
}

用box-shadow实现 #

.container:focus,
.container:hover {
  box-shadow: 0 0 0 2px #419BF9;
  border-radius: 15px 5px 5px 15px;
}

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