Die Eigenschaft border-bottom-width legt die Breite des unteren Randes fest.
Sie müssen die Eigenschaft border-style oder border-bottom-style vor der Eigenschaft border-bottom-width einstellen. Zuerst müssen Sie Grenzen haben, bevor Sie die Breite ändern können.
Die Spezifikation setzt nicht die genaue Dicke, die durch jedes Schlüsselwort festgelegt wird, das genaue Ergebnis bei der Verwendung eines von ihnen ist implementierungsspezifisch. Aber sie folgen immer dem Muster ≤ medium ≤ thick, und die Werte sind innerhalb eines einzigen Dokuments konstant.
| Anfangswert | medium |
| Gilt für | Alle Elemente. Es gilt auch für ::first-letter. |
| Geerbt | Nein |
| Animierbar | Ja. Die Breite kann animierbar sein. |
| Version | CSS1 |
| DOM Syntax | object.style.borderBottomWidth = "5px"; |
Syntax
border-bottom-width: medium | thin | thick | length | initial | inherit;Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: dotted;
border-bottom-width: thick;
}
</style>
</head>
<body>
<p>Wie Sie sehen können, haben wir die Eigenschaft border-bottom-width verwendet, um die Breite des unteren Randes dieses Elements festzulegen.</p>
</body>
</html>Hier ist ein weiteres Beispiel mit mittlerer Breite des unteren Randes.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
h2 {
border-bottom-style: groove;
border-bottom-width: medium;
}
div {
border-style: groove;
border-bottom-width: medium;
}
</style>
</head>
<body>
<h2>Eine Überschrift mit einem mittleren unteren Rand.</h2>
<div>Ein Element div mit einem mittleren unteren Rand.</div>
</body>
</html>Sehen Sie ein weiteres Beispiel, wo Sie den Unterschied zwischen 20px thin width des unteren Randes und 20px thick width des unteren Randes sehen können.
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
padding: 5px;
border-bottom-style: ridge;
border-bottom-width: 20px thin;
}
div {
padding: 5px;
border-style: ridge;
border-bottom-width: 20px;
}
</style>
</head>
<body>
<h2>Eine Überschrift mit 20px dünnem unteren Rand</h2>
<div>Ein div-Element mit 20px dickem unteren Rand.</div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| medium | Es setzt einen mittleren unteren Rand. Es ist der Standardwert. |
| thin | Es setzt einen dünnen unteren Rand. |
| thick | Es setzt einen dicken unteren Rand. |
| length | Mithilfe von length können Sie die Dicke des unteren Randes einstellen. |
| 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
