我想创建一个如下所示的边框，但不确定如何使用 CSS 来实现这一点，有人可以帮忙吗？
当前代码包含我想要这种样式的按钮。
我尝试过使用带有轮廓的边框，也尝试过在 :before 后面使用边框来尝试使其正常工作，但无济于事。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1
933
收藏
我没有完全匹配您的按钮，但足以让您了解如何操作。
我对白色部分使用边框。然后勾勒出外部细线。
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>