CSS border-left-width-Eigenschaft
Die border-left-width-Eigenschaft wird verwendet, um die Breite der linken Grenze eines Elements zu definieren.
Die Breite der linken Grenze sowie aller anderen Grenzseiten kann auch mit den Kurzschreibweisen border oder border-width definiert werden.
Um border-left-width festzulegen, sollten Sie zuerst die border-style-Eigenschaft definieren, da Sie Grenzen benötigen, bevor Sie deren Breite festlegen. Sie können entweder border-left-style oder die CSS-Eigenschaft border-style verwenden, um den Grenzstil zu definieren.
INFO
Die Spezifikation definiert nicht die genaue Dicke jedes Schlüsselworts. Sie folgen jedoch immer dieser Reihenfolge: thin ≤ medium ≤ thick.
INFO
Die Spezifikation definiert nicht, wie Grenzen unterschiedlicher Breite und Stile in den Ecken verbunden werden.
| Anfangswert | medium |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter. |
| Vererbbar | Nein |
| Animierbar | Ja. Die Breite der Grenze ist animierbar. |
| Version | CSS1 |
| DOM-Syntax | object.style.borderLeftWidth = "4px"; |
Syntax
Syntax der CSS border-left-width-Eigenschaft
border-left-width: medium | thin | thick | length | initial | inherit;Beispiel für die border-left-width-Eigenschaft mit dem Wert „thick“:
Beispiel für die CSS border-left-width-Eigenschaft mit dem Wert „thick“
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
padding: 10px;
border-style: dashed;
border-left-width: thick;
}
</style>
</head>
<body>
<h2>Border-left-width example</h2>
<p>As you can see the width of the left border is set to thick.</p>
</body>
</html>Beispiel für die border-left-width-Eigenschaft mit allen Werten:
Beispiel für die CSS border-left-width-Eigenschaft mit den Werten medium, thin, thick, px, initial und inherit
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc;
font-size: 20px;
text-align: center;
}
main div {
display: flex;
align-items: center;
justify-content: center;
color: black;
padding-top: 30px;
padding-bottom: 30px;
width: 200px;
height: 100px;
margin: 15px;
font-weight: bold;
border: solid;
}
.flex-center {
display: flex;
justify-content: center;
}
/* border-left-width example classes */
.b1 {
border-left-width: medium;
}
.b2 {
border-left-width: thin;
}
.b3 {
border-left-width: thick;
}
.b4 {
border-left-width: 10px;
}
.b5 {
border-left-width: initial;
}
.b6 {
border-left-width: inherit;
}
</style>
</head>
<body>
<h1>Border-left-width value examples</h1>
<main class="flex-center">
<div class="b1">
medium
</div>
<div class="b2">
thin
</div>
<div class="b3">
thick
</div>
</main>
<main class="flex-center">
<div class="b4">
10px length
</div>
<div class="b5">
initial
</div>
<div class="b6">
inherit
</div>
</main>
</body>
</html>Ergebnis
Werte
| Wert | Beschreibung | Ausführen |
|---|---|---|
| medium | Definiert eine mittlere linke Grenze. Dies ist der Standardwert dieser Eigenschaft. | Ausführen » |
| thin | Definiert eine dünne linke Grenze. Die genaue Breite bleibt dem Benutzeragenten überlassen. | Ausführen » |
| thick | Definiert eine dicke linke Grenze. Die genaue Breite bleibt dem Benutzeragenten überlassen. | Ausführen » |
| length | Definiert die Längenangabe der Dicke der linken Grenze. Zum Beispiel 10px, 5em, 8pt usw. | Ausführen » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausführen » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Praxis
Welche der folgenden Werte können mit der border-left-width-Eigenschaft in CSS verwendet werden?