Je souhaite créer une bordure comme celle ci-dessous, mais je ne sais pas comment y parvenir en utilisant CSS, quelqu'un peut-il m'aider ?
Le code actuel contient le bouton que je veux avec ce style.
<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>
J'ai essayé d'utiliser une bordure avec un contour, et j'ai également essayé d'utiliser une bordure après :avant pour essayer de la faire fonctionner, mais en vain.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Je n'ai pas exactement fait correspondre vos boutons, mais suffisamment pour vous donner une idée de comment faire.
J'utilise une bordure pour la partie blanche. Tracez ensuite les lignes fines extérieures.
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>