Saya ingin membuat sempadan seperti di bawah tetapi tidak pasti bagaimana untuk mencapai ini menggunakan CSS, sesiapa boleh membantu?
Kod semasa mengandungi butang yang saya mahu dengan gaya ini.
<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>
Saya telah mencuba menggunakan sempadan dengan garis besar, dan juga cuba menggunakan sempadan selepas :sebelum untuk mencuba dan memastikannya berfungsi, tetapi tidak berjaya.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya tidak memadankan butang anda dengan tepat, tetapi cukup untuk memberi anda idea tentang cara melakukannya.
Saya guna border untuk bahagian putih. Kemudian gariskan garis nipis luar.
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>