Wie erstelle ich mit HTML5 und CSS3 einen Kreis mit teilweisem Rand?

Erstellen eines Kreises mit teilweisem Rand in HTML5 / CSS3

Es ist tatsächlich möglich, mit HTML5 und CSS3 einen Kreis mit teilweisem Rand zu erstellen. Eine effektive Technik besteht darin, mehrere Maskenschichten zu verwenden, um den gewünschten Effekt zu erzielen.

2024-Lösung:

Diese Methode nutzt zwei Maskierungsschichten, ohne dass zusätzlich JavaScript erforderlich ist Elemente oder Pseudos. Es bleibt auch dann funktionsfähig, wenn das Element einen halbtransparenten Hintergrund hat. Dazu gehört:

1. Erstellen eines kreisförmigen Elements (beliebige Breite, Seitenverhältnis 1, Randradius 50 %) mit einem angegebenen Rand.
2. Definieren einer konischen Verlaufsmaske relativ zur Rahmenbox, die einen bestimmten Prozentsatz der Fläche des Elements abdeckt (z. B. 17 %).
3. Hinzufügen einer vollflächigen Maskenebene, die auf die Füllbox beschränkt ist.

Hier ist ein Beispiel für ein CSS-Code-Snippet:

<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>

Diese Methode ist effektiv beim Erstellen eines Kreises mit einem teilweisen Rand und bleibt von der Hintergrundtransparenz des Elements unberührt.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit HTML5 und CSS3 einen Kreis mit teilweisem Rand?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!