Wie erstelle ich mit CSS einen Teilrahmen auf einem Kreis?

Erstellen eines Kreises mit einem teilweisen Rand mit HTML5 / CSS3

Ist es möglich, einen Kreis mit einem Rand zu erstellen, der sich nur teilweise um ihn herum erstreckt? seinen Umfang mit HTML5 / CSS3? Obwohl die HTML5- und CSS3-Spezifikationen dies nicht direkt unterstützen, gibt es Techniken, die diesen Effekt erzielen können.

Nur ​​CSS-Methode

Eine Methode, die nur minimales JavaScript erfordert und Bei externen Elementen werden CSS-Masken manipuliert:

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

Dieses CSS erstellt ein kreisförmiges Element mit einem pinkfarbenen Rand und einem halbtransparenten Hintergrund. Die Maske mit konischem Verlauf deckt einen Prozentsatz des Elements ab, beginnend bei 12 Uhr und weiter im Uhrzeigersinn. Darauf wird dann eine lineare Verlaufsmaske angewendet, die auf das Füllfeld beschränkt ist, um den partiellen Randeffekt zu erzeugen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS einen Teilrahmen auf einem Kreis?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!