Die CSS-Eigenschaft border-bottom-color wird verwendet, um die Farbe des unteren Randes eines Elements festzulegen.
Zuerst müssen Sie die Eigenschaften border-style oder border-bottom-style definieren, da ein Element einen Rand haben muss, bevor Sie seine Farbe ändern können.
Die Farbe des unteren Randes kann auch mit der Shorthand-Eigenschaft border-color definiert werden.
| Anfangswert | currentColor |
| Gilt für | Alle elemente |
| Geerbt | Nein |
| Animierbar | Ja. Die Farbe des unteren Randes ist animierbar. |
| Version | CSS1. |
| DOM Syntax | object.style.borderBottomColor = "blue"; |
Syntax
border-bottom-color: color | transparent | initial | inherit;Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom-style: solid;
border-bottom-color: #1c87c9;
border-bottom-width: 5px;
}
</style>
</head>
<body>
<h2>Eine Überschrift mit einem massiven blauen unteren Rand</h2>
</body>
</html>Lassen Sie uns ein weiteres Beispiel sehen, wo wir Farbenzu den Elementen <h2>, <p> und <div> hinzugefügt haben, um den Farbeffekt zu zeigen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom-style: groove;
border-bottom-color: #8ebf42;
border-bottom-width: 5px;
}
div {
border-style: inset;
border-bottom-color: #ccc;
border-bottom-width: 8px;
}
p {
border-style: double;
border-bottom-color: #1c87c9;
border-bottom-width: 8px;
}
</style>
</head>
<body>
<h2>Eine Überschrift mit einem grünen unteren Rand.</h2>
<div>Ein Element div mit einem eingefügten grauen unteren Rand.</div>
<p>Ein Absatz mit einem doppelten blauen Rand.</p>
</body>
</html>In diesem Beispiel haben wir den Wert transparent verwendet.
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: #666 dashed;
border-bottom-color: transparent;
padding: 8px;
}
</style>
</head>
<body>
<h2>Ein Beispiel für transparent border-bottom-color</h2>
<div>Dies ist ein Beispiel für ein Element div, das auf transparent border-bottom-color eingestellt ist.</div>
</body>
</html>Sie können hexadezimale, RGB, RGBA, HSL, HSLA oder Farbnamen als Wert für die Eigenschaft border-right-color einstellen.
Sehen wir uns nun ein Beispiel an, wo die Eigenschaft border-bottom-color mit hexadezimalen, RGB, HSL und benannten Farbwerten eingestellt ist.
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 5px solid #666;
width: 60%;
padding: 5px;
}
.name {
border-bottom-color: lightblue;
}
.hex {
border-bottom-color: #1c87c9;
}
.rgb {
border-bottom-color: rgba(0,0,0,0.15);
}
.hsl {
border-bottom-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<p class="name">Unterer Rand mit benannter Farbe.</p>
<p class="hex">Unterer Rand mit einem hexadezimalen Wert.</p>
<p class="rgb">Unterer Rand mit einem RGB-Farbwert.</p>
<p class="hsl">Unterer Rand mit einem HSL-Farbwert.</p>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| color | Es zeigt die Farbe des unteren Randes an. Die Standardfarbe ist die Farbe des Elements. Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() können verwendet werden. Erforderlicher Wert. |
| transparent | Es zeigt an, dass die Randfarbe transparent sein soll. Der untere Rand nimmt immer noch den Platz ein, der durch den Wert für die Rahmenbreite definiert ist. |
| initial | Es setzt die Eigenschaft auf seinen Standardwert. |
| inherit | Es erbt die Eigenschaft von ihrem übergeordneten Element. |
Browser-Support
|
|
|
|
|---|---|---|---|
| 1.0+ | 1.0+ | 1.0+ | 3.5+ |
Übe dein Wissen
