Comment créer une bordure partielle sur un cercle en utilisant CSS ?

Créer un cercle avec une bordure partielle à l'aide de HTML5/CSS3

Est-il possible de créer un cercle avec une bordure qui ne s'étend que partiellement autour son périmètre en utilisant HTML5/CSS3 ? Bien que les spécifications HTML5 et CSS3 ne prennent pas directement en charge cela, il existe des techniques qui peuvent obtenir cet effet.

Méthode CSS uniquement

Une méthode qui nécessite un minimum de JavaScript et les éléments externes impliquent la manipulation de masques CSS :

.circular-progress {
  border: 1.5em solid hotpink;
  width: 50vmin;
  aspect-ratio: 1;
  border-radius: 50%;
  background: hsla(180, 100%, 50%, .5);
  mask: 
    linear-gradient(red 0 0) padding-box, 
    conic-gradient(red var(--p, 17%), transparent 0%) border-box
}

Ce CSS crée un élément circulaire avec une bordure rose vif et un arrière-plan semi-transparent. Le masque à dégradé conique couvre un pourcentage de l'élément, à partir de 12 heures et dans le sens des aiguilles d'une montre. Un masque à dégradé linéaire est ensuite appliqué sur le dessus, limité à la zone de remplissage pour créer l'effet de bordure partielle.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!