CSS底部边框异常求助：边框宽度随缩放变化且显示异常

问题根源 #

• 使用vw作为边框单位，浏览器缩放时视窗宽度变化，边框宽度会同步改变，不符合固定宽度的需求
• 常规border与border-image混用，加上默认盒模型下padding会撑开元素，导致底部边框显示范围异常，出现间隙或过窄情况

解决方案 #

1. 固定边框单位：用px（固定宽度）或rem（响应式但不随浏览器缩放改变）替换vw，保证边框宽度稳定
2. 伪元素实现渐变边框：避免border-image的兼容性问题，精准控制边框范围，确保上下边框完全一致
3. 统一盒模型：设置box-sizing: border-box，让padding不会撑开元素宽度，消除布局偏移

修改后的完整代码 #

CSS代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 统一盒模型，避免padding撑开元素 */
}

.transfer {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 控制内部元素间距，不影响边框 */
  justify-content: center;
  padding: 1rem;
  background-color: #12121d;
  width: 100%;
  position: relative; /* 为伪元素定位提供基准 */
}

/* 上下边框基础样式 */
.transfer::before,
.transfer::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px; /* 固定边框高度，替代vw */
  background-color: #12121d;
}

.transfer::before {
  top: 0;
}

.transfer::after {
  bottom: 0;
}

.transfer:hover {
  cursor: pointer;
  background-color: rgb(50, 158, 50);
  transition: background-color 0.3s ease;
}

/* hover时的边框动画 */
.transfer:hover::before,
.transfer:hover::after {
  animation: border-anim 1s infinite linear;
}

@keyframes border-anim {
  0% {
    background: linear-gradient(90deg, rgb(50, 158, 50), rgb(50, 158, 50), rgb(50, 158, 50));
  }
  20% {
    background: linear-gradient(90deg, rgb(174, 248, 174), rgb(50, 158, 50), rgb(50, 158, 50));
  }
  40% {
    background: linear-gradient(90deg, rgb(174, 248, 174), rgb(174, 248, 174), rgb(50, 158, 50));
  }
  60% {
    background: linear-gradient(90deg, rgb(50, 158, 50), rgb(174, 248, 174), rgb(174, 248, 174));
  }
  80% {
    background: linear-gradient(90deg, rgb(50, 158, 50), rgb(50, 158, 50), rgb(174, 248, 174));
  }
  100% {
    background: linear-gradient(90deg, rgb(50, 158, 50), rgb(50, 158, 50), rgb(50, 158, 50));
  }
}

HTML代码（无需修改）

<div class="transfer">
  <p>Transfer</p>
  <i class="fas fa-paper-plane"></i>
</div>

关键修改说明 #

• 伪元素::before/::after实现的边框宽度始终为100%，不受padding影响，上下边框完全对齐
• 固定边框高度为4px，浏览器缩放时宽度不会变化
• 盒模型统一后，元素宽度严格保持100%，消除布局间隙
• 动画绑定到伪元素上，避免原border与border-image的冲突问题

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