Heim > Artikel > Web-Frontend > Wie verwende ich den Randradius in CSS3? Beispiel zur Erläuterung, wie man mit dem Randradius einen Kreis zeichnet

Wie verwende ich den Randradius in CSS3? Beispiel zur Erläuterung, wie man mit dem Randradius einen Kreis zeichnet

yuliaOriginal: 2018-09-07 13:53:403669Durchsuche

In CSS3 wird der Randradius verwendet, um den Effekt abgerundeter Ecken zu erzielen. Im Folgenden wird die Verwendung im Detail beschrieben, um zu erklären, wie der Randradius zum Zeichnen eines Kreises verwendet wird.

Die Eigenschaft „border-radius“ ist eine Abkürzungseigenschaft zum Festlegen der vier Eigenschaften „border-*-radius“.
Hinweis: Wenn die untere linke Ecke weggelassen wird, ist die obere rechte Ecke dieselbe. Wenn die untere rechte Ecke weggelassen wird, ist die obere linke Ecke dieselbe. Wenn die obere rechte Ecke weggelassen wird, ist die obere linke Ecke dieselbe. Sein Wert kann ein Längenwert oder hundert Prozent sein.
Wenn vier Werte angegeben werden, sind dies die obere linke Ecke, die obere rechte Ecke, die untere rechte Ecke und die untere linke Ecke. Das heißt, Rand-oben-links-Radius, Rand-oben-rechts-Radius, Rand-unten-rechts-Radius, Rand-unten-linker-Radius
Wenn drei Werte angegeben werden, repräsentieren sie die obere linke Ecke Ecke, (obere rechte Ecke, untere linke Ecke), untere rechte Ecke
Wenn zwei Werte angegeben werden, bedeutet dies (obere linke Ecke, untere rechte Ecke), (obere rechte Ecke, untere linke Ecke)
Wenn ein Wert angegeben wird, stellt er den gleichen Effekt in den vier Ecken dar

Beispiel 1: Geben Sie einen Wert an

div{width: 150px;height: 150px;border-radius: 15%;background: red;}

Rendering:

Wie verwende ich den Randradius in CSS3? Beispiel zur Erläuterung, wie man mit dem Randradius einen Kreis zeichnet

Beispiel 2: Geben Sie zwei Werte an

div{width: 150px;height: 150px;border-radius: 5% 15%;background: red;}

Rendering:

Wie verwende ich den Randradius in CSS3? Beispiel zur Erläuterung, wie man mit dem Randradius einen Kreis zeichnet

Beispiel 3: Geben Sie drei Werte an

div{width: 150px;height: 150px;border-radius: 5% 15% 30%;background: red;}

Rendering:

Wie verwende ich den Randradius in CSS3? Beispiel zur Erläuterung, wie man mit dem Randradius einen Kreis zeichnet

Beispiel 4: Geben Sie vier Werte an

div{width: 150px;height: 150px;border-radius: 5% 15% 30% 45%;background: red;}

Rendering:

Wie verwende ich den Randradius in CSS3? Beispiel zur Erläuterung, wie man mit dem Randradius einen Kreis zeichnet

Beispiel: Verwenden Sie den Randradius, um einen Kreis zu erstellen

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .a1{width: 200px;height: 200px;background: beige;text-align:
center;line-height: 200px;font-size: 50px;}
   .a2{width: 200px;height: 200px;background: pink;border-radius:
50%;}
  </style>
 </head>
 <body>
  <div class="a1">
   <div class="a2">HELLO</div>
  </div>
 </body>
</html>

Rendering:

Das Obige ist eine detaillierte Einführung in abgerundete Ecken.

Das obige ist der detaillierte Inhalt vonWie verwende ich den Randradius in CSS3? Beispiel zur Erläuterung, wie man mit dem Randradius einen Kreis zeichnet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css3 border

Stellungnahme：

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

Vorheriger Artikel：Wie zentriere ich Inhalte in einer CSS-Tabelle? Einführung in Textstile in CSS-TabellenNächster Artikel：Wie zentriere ich Inhalte in einer CSS-Tabelle? Einführung in Textstile in CSS-Tabellen

In Verbindung stehende Artikel

Mehr sehen