Wie erstelle ich im Jahr 2024 kreisförmige Formen mit teilweisen Rändern nur mit CSS?

Erstellen von Kreisen mit teilweisen Rändern in HTML5/CSS3

Bei der Aufgabe, mit HTML5/CSS3 eine kreisförmige Form mit teilweise sichtbarem Rand zu erstellen, stellt sich die Frage, ob sie gerade ist möglich. In diesem Artikel werden verschiedene Techniken untersucht, um diesen Effekt zu erzielen, wobei der Schwerpunkt auf der 2024-Lösung liegt.

2024-Lösung: Ein hochmoderner Ansatz

Die 2024-Lösung funktioniert ohne JavaScript, zusätzliche Elemente oder Pseudo- Elemente. Es basiert ausschließlich auf CSS-Deklarationen und funktioniert selbst bei halbtransparenten Hintergründen außergewöhnlich gut.

Dieser innovative Ansatz beinhaltet eine Doppelschichtmaske:

• Schicht 1 (konisch- Verlaufsmaske): Diese Maske verwendet einen konischen Verlauf relativ zum Rahmen und zeigt einen anpassbaren Teil (gesteuert durch --p) des Kreises an, beginnend bei 12 Uhr im Uhrzeigersinn.
• Ebene 2 (Maske mit vollständiger Abdeckung): Diese Maske umfasst den gesamten Bereich innerhalb der Füllbox und stellt sicher, dass der Rand fest innerhalb des Kreisumfangs bleibt.

Code Snippet

Das folgende Codebeispiel zeigt die Lösung von 2024:

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

/* To demonstrate compatibility with semi-transparent backgrounds */
body {
  background: 
    url(https://images.unsplash.com/photo-1693483923875-cdd9ef4a8046?w=800) 
      50%/ cover
}</code>

<code class="html"><div class='circular-progress'></div></code>

Mit diesem CSS-Code können Sie jetzt mühelos kreisförmige Formen mit teilweise sichtbaren Rändern erstellen. Die Variable --p bietet Flexibilität bei der Steuerung des sichtbaren Teils des Rahmens und macht sie zu einer vielseitigen Lösung für eine Reihe von Designanforderungen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich im Jahr 2024 kreisförmige Formen mit teilweisen Rändern nur mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!