Maison > Article > interface Web > Comment créer un cercle avec une bordure partielle en utilisant HTML5 et CSS3 ?
Il est en effet possible de créer un cercle avec une bordure partielle en utilisant HTML5 et CSS3. Une technique efficace consiste à utiliser plusieurs couches de masques pour obtenir l'effet souhaité.
Solution 2024 :
Cette méthode utilise deux couches de masquage sans avoir besoin de JavaScript, des informations supplémentaires éléments, ou pseudos. Il reste fonctionnel même lorsque l'élément possède un fond semi-transparent. Il s'agit de :
Voici un exemple d'extrait de code CSS :
<code class="css">.circular-progress { border: solid 1.5em 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; } /* for visual clarity with a semi-transparent background */ body { background: url(image-url) 50%/cover; }</code>
Cette méthode est efficace pour créer un cercle avec une bordure partielle, et elle n'est pas affectée par la transparence de l'arrière-plan de l'élément.
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!