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|%;}“.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
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:
(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!
