suchen

Heim  >  Artikel  >  Web-Frontend  >  Implementieren Sie den Effekt abgerundeter Ecken in CSS3

Implementieren Sie den Effekt abgerundeter Ecken in CSS3

WBOY
WBOYOriginal
2022-08-11 17:16:263183Durchsuche

In CSS3 können Sie das Attribut „border-radius“ verwenden, um den Effekt abgerundeter Ecken zu erzielen. Dieses Attribut wird verwendet, um die abgerundeten Ecken des äußeren Rands des Elements festzulegen, und dieses Attribut ist ein abgekürztes Attribut, das verwendet werden kann Um die Stile der vier abgerundeten Ecken festzulegen, lautet die Syntax „element object {border-radius: 1-4 length|% / 1-4 length|%;}“.

Implementieren Sie den Effekt abgerundeter Ecken in CSS3

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

Abgerundete Ecken in CSS3 erreichen

Mit dem Randradius können Sie festlegen, dass der äußere Rand eines Elements abgerundet wird. Bestimmt einen Kreis bei Verwendung eines Radius und eine Ellipse bei Verwendung von zwei Radien. Der Schnittpunkt dieses (ovalen) Kreises und der Umrandung erzeugt einen abgerundeten Eckeneffekt.

border-radius-Attribut ist ein zusammengesetztes Attribut, das bis zu vier border-*-radius-Attribute angeben kann.

Syntax

border-radius: 1-4 length|% / 1-4 length|%;

Hinweis: Die Reihenfolge der vier Werte für jeden Radius ist: obere linke Ecke , obere rechte Ecke, rechte Ecke untere Ecke, untere linke Ecke. 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.

  • Länge definiert die Form der Kurve.

  • % Verwenden Sie %, um die Form der Ecken zu definieren.

Das Beispiel sieht wie folgt aus: 

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px; 
background:#dddddd;
width:350px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body>
<div>border-radius 属性允许您向元素添加圆角。</div>
</body>
</html>

Ausgabeergebnis:

Implementieren Sie den Effekt abgerundeter Ecken in CSS3

(Teilen von Lernvideos: CSS-Video-Tutorial, HTML-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonImplementieren Sie den Effekt abgerundeter Ecken in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Gehört Vue zu HTML5?Nächster Artikel：Gehört Vue zu HTML5?

In Verbindung stehende Artikel

Mehr sehen