如何用CSS实现按钮内容外悬浮几像素的边框效果？

根据你提供的按钮结构，要实现图中的边框效果（按钮与外层边框间带间隙的双层边框样式），可以用以下两种方案解决：

方案一：伪元素实现双层边框（灵活可控） #

通过给容器添加伪元素来模拟外层边框，能精准控制间距和样式：

/* 给按钮容器设置相对定位，作为伪元素的参考 */
.nav-item.button {
  position: relative;
  padding: 4px; /* 控制内层按钮与外层边框的间距 */
  display: inline-block; /* 避免容器占满整行 */
}

/* 伪元素生成外层边框 */
.nav-item.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #ccc; /* 外层边框颜色 */
  border-radius: 6px; /* 可选，和按钮圆角保持一致 */
}

/* 内层按钮样式 */
.nav-item.button .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid #999; /* 内层边框颜色 */
  border-radius: 4px;
  background-color: #fff;
  color: #333;
  text-decoration: none;
}

方案二：outline + outline-offset（简洁高效） #

利用CSS的outline和outline-offset属性，快速实现带间隙的双层边框，适合样式需求简单的场景：

.nav-item.button .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid #999; /* 内层边框 */
  border-radius: 4px;
  background-color: #fff;
  color: #333;
  text-decoration: none;
  /* 外层边框及间距 */
  outline: 1px solid #ccc;
  outline-offset: 4px; /* 内外边框的间距，可正负调整 */
}

注意事项 #

• 确保.nav-link设置为flex或block类的块级元素，否则padding和outline无法正常生效；
• 可根据需求调整边框颜色、圆角、间距等参数，匹配图中的样式。

你的按钮HTML结构如下：

<li class="nav-item button">
  <a class="nav-link" href="#">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
      <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
    </svg>
  </a>
</li>

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