我如何创建一个按钮的边框，使其在其内容之外浮动几个像素？

Question

我想创建一个如下所示的边框，但不确定如何使用 CSS 来实现这一点，有人可以帮忙吗？

当前代码包含我想要这种样式的按钮。

<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>

我尝试过使用带有轮廓的边框，也尝试过在 :before 后面使用边框来尝试使其正常工作，但无济于事。

Answer 1

我没有完全匹配您的按钮，但足以让您了解如何操作。

我对白色部分使用边框。然后勾勒出外部细线。

ul{list-style:none}
.nav-link{
  display:inline-block;
  background:red;
  padding:20px;
  border:10px #fff solid;
  border-radius:50%;
  outline:1px red solid;
  color:#fff;
}

<ul><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></ul>