Wie kann ich Kreise mit HTML5 und CSS3 erstellen und formatieren?

Zeichnen von Kreisen in HTML5 und CSS3

Obwohl HTML5 und CSS3 keine native Unterstützung für das direkte Zeichnen von Kreisen bieten, ist es möglich, dies zu replizieren Erscheinen eines Kreises mit innovativen Techniken.

Erstellen eines Kreises mit Abgerundet Ecken

Um einen Kreis zu simulieren, können Sie ein rechteckiges Element erstellen und abgerundete Ecken darauf anwenden. Der Radius der abgerundeten Ecken sollte halb so groß sein wie die gewünschte Breite oder Höhe des Kreises, den Sie erstellen möchten.

Der folgende Code erstellt beispielsweise einen roten Kreis mit einem Durchmesser von 50 Pixeln:

#circle {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  background: red;
}

<div>

Text innerhalb eines Kreises hinzufügen

Um Text innerhalb des Kreises hinzuzufügen, positionieren Sie das Textelement absolut innerhalb Zentrieren Sie den Kreisbehälter und richten Sie ihn vertikal und horizontal aus.

#circle {
  position: relative;
}

#text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

<div>

Das obige ist der detaillierte Inhalt vonWie kann ich Kreise mit HTML5 und CSS3 erstellen und formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!