Heim > Web-Frontend > CSS-Tutorial > Wie erstelle ich mit HTML5 und CSS3 einen Kreis mit teilweisem Rand?

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

Linda Hamilton
Freigeben: 2024-11-04 00:09:30
Original
988 Leute haben es durchsucht

How to Create a Circle with a Partial Border Using HTML5 and CSS3?

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage