Heim > Artikel > Web-Frontend > So stellen Sie den Rahmen in CSS auf abgerundete Ecken ein
So stellen Sie den Rahmen in CSS auf abgerundete Ecken ein
- 青灯夜游Original
- 2021-09-14 16:21:3314668Durchsuche
In CSS können Sie das Attribut „border-radius“ verwenden, um den Rand auf abgerundete Ecken festzulegen. Sie müssen nur den Stil „border-radius:radius value;“ zum Randelement hinzufügen, um die Radien von vier abgerundeten Ecken festzulegen Gleichzeitig werden alle vier Ecken auf abgerundete Ecken gesetzt.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Die gebräuchlichste und einfachste Möglichkeit, einen abgerundeten Rahmen in CSS festzulegen, ist die Verwendung des Attributs border-radius.
Für abgerundete CSS-Ecken muss nur eine Eigenschaft festgelegt werden: border-radius (bedeutet „Randradius“). Sie geben einen Wert für diese Eigenschaft an, um die Radien aller vier Ecken gleichzeitig festzulegen. Alle zulässigen CSS-Maße können verwendet werden: em, ex, pt, px, Prozentsatz usw.
border-radius kann 1 bis 4 Werte gleichzeitig festlegen:
Wenn Sie 1 Wert festlegen, bedeutet dies, dass alle 4 Verrundungen diesen Wert verwenden.
<!DOCTYPE html>
<html>
<head>
<style>
div{
text-align:center;
border:2px solid #a1a1a1;
padding:80px 40px;
background:pink;
width:150px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body>
<div>圆角边框</div>
</body>
</html>Rendering:
Wenn zwei Werte festgelegt sind, bedeutet dies, dass die obere linke Ecke und die untere rechte Ecke den ersten Wert verwenden und die obere rechte Ecke und die untere linke Ecke den zweiten Wert.
Wenn drei Werte festgelegt sind, bedeutet dies, dass die obere linke Ecke den ersten Wert verwendet, die obere rechte Ecke und die untere linke Ecke den zweiten Wert verwenden und die untere rechte Ecke den dritten Wert verwendet.
Wenn vier Werte eingestellt sind, entsprechen sie der oberen linken Ecke, der oberen rechten Ecke, der unteren rechten Ecke und der unteren linken Ecke (Reihenfolge im Uhrzeigersinn).
border-radius kann auch den zweiten Wertesatz mit Schrägstrichen festlegen. Der erste Wertesatz repräsentiert den horizontalen Radius und der zweite Wertesatz repräsentiert den vertikalen Radius. Der zweite Wertesatz kann auch 1 bis 4 Werte gleichzeitig festlegen, und die Anwendungsregeln sind die gleichen wie beim ersten Wertesatz.
Verwandte Empfehlungen: „CSS-Video-Tutorial“
Das obige ist der detaillierte Inhalt vonSo stellen Sie den Rahmen in CSS auf abgerundete Ecken ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!