Die Eigenschaft border-bottom-left-radius gibt die runde Form der linken unteren Ecke des Elements an. Es gibt drei Arten von Formen: einen Kreis oder eine Ellipse, wenn Sie keinen Wert verwenden, ist die Ecke quadratisch. Wenn Sie ein Hintergrundbild oder eine Hintergrundfarbe verwenden, wird es am Rand abgeschnitten. Der Prozess des Clippings wird durch den Wert der Eigenschaft background-clip definiert.
Die Eigenschaft border-bottom-left-radius hat zwei Werte: length und percentage. Wenn nur ein Wert angegeben wird, gibt er sowohl horizontale als auch vertikale Radien der Ellipse an. Wenn zwei Werte angegeben werden, setzt der erste Wert den horizontalen Radius und der zweite Wert den vertikalen Radius.
Die Prozentsätze für den horizontalen Radius beziehen sich auf die Breite der Box, die Prozentsätze für den vertikalen Radius auf die Höhe der Box. Negative Werte sind nicht erlaubt.
| Anfangswert | 0 |
| Gilt für | Alle Elemente. Es gilt auch für ::first-letter. |
| Geerbt | Nein |
| Animierbar | Ja. Der Radius des linken unteren Randes ist animierbar. |
| Version | CSS3 |
| DOM Syntax | object.style.borderBottomLeftRadius = "35px"; |
Syntax
border-bottom-left-radius: length| % | initial | inherit;Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div {
height: 40px;
background: #1c87c9;
border: 4px solid #000000;
border-bottom-left-radius: 25px;
}
</style>
</head>
<body>
<h2>Ein Beispiel für border-bottom-left-radius.</h2>
<div></div>
</body>
</html>Betrachten wir ein weiteres Beispiel mit zwei Werten.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div {
height: 40px;
background: #666;
border: 4px solid #000000;
border-bottom-left-radius: 30px 15px;
}
</style>
</head>
<body>
<h2>Ein Beispiel für border-bottom-left-radius.</h2>
<div></div>
</body>
</html>Sehen Sie sich ein Beispiel mit Prozent an.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
background-color: #666;
padding: 10px;
border-bottom-left-radius: 50%;
}
</style>
</head>
<body>
<h2>Ein Beispiel für border-bottom-left-radius.</h2>
<div></div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| length | Es gibt die Rundung der linken unteren Ecke in "px" an. |
| % | Es stellt die Rundung der linken unteren Ecke in Prozent dar. |
| initial | Es setzt die Eigenschaft auf seinen Standardwert. |
| inherit | Es erbt die Eigenschaft von ihrem übergeordneten Element. |
Browser-Support
|
|
|
|
|---|---|---|---|
| 4.0+ | 4.0+ | 5.0+ | 10.5+ |
Übe dein Wissen
