CSS border-left-color-Eigenschaft
Die Eigenschaft border-left-color legt die Farbe des linken Rahmens eines Elements fest.
Die Farbe des linken Rahmens zusammen mit den Farben des rechten, oberen und unteren Rahmens kann ebenfalls mit der Shorthand-Eigenschaft border-color festgelegt werden.
Wenn Sie die Eigenschaft border-left-color verwenden, sollten Sie zuerst die Eigenschaften border-style oder border-left-style festlegen und anschließend die Farbe des angegebenen Stils ändern.
Die Standardbreite eines Rahmens ist medium. Sie können die Breite entweder mit den Eigenschaften border-width oder border-left-width definieren.
| Anfangswert | currentColor |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter. |
| Vererbbar | Nein |
| Animierbar | Ja. Die Farbe des linken Rahmens ist animierbar. |
| Version | CSS1 |
| DOM-Syntax | object.style.borderLeft = "1px solid black"; |
Syntax
Syntax der CSS border-left-color-Eigenschaft
border-left-color: color | transparent | initial | inherit;Beispiel für die border-left-color-Eigenschaft:
Beispiel für die CSS border-left-color-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 300px;
padding: 20px;
border-style: solid;
border-color: #666;
border-left-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Border-left-color example</h2>
<div>Example for the border-left-color property with different left border color.</div>
</body>
</html>Ergebnis
Betrachten Sie ein weiteres Beispiel, bei dem der Wert für den linken Rahmen auf transparent gesetzt ist.
Beispiel für die border-left-color-Eigenschaft mit dem Wert „transparent“:
Beispiel für die CSS border-left-color-Eigenschaft mit transparentem Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
padding: 3px;
text-align: center;
border: 15px ridge #8ebf42;
border-left-color: transparent;
}
</style>
</head>
<body>
<h2>A heading with a transparent left border</h2>
</body>
</html>INFO
Sie können hexadezimale Werte, RGB, RGBA, HSL, HSLA oder Farbnamen als Wert für die border-left-color-Eigenschaft festlegen.
Beispiel für die border-left-color-Eigenschaft mit einem benannten Farbwert:
Beispiel für die CSS border-left-color-Eigenschaft mit dem Wert darkred
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: darkred;
}
</style>
</head>
<body>
<div>Border-left-color property with a named color value.</div>
</body>
</html>Beispiel für die border-left-color-Eigenschaft mit einem hexadezimalen Wert:
Beispiel für die CSS border-left-color-Eigenschaft mit hexadezimalem Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: #1c87c9;
}
</style>
</head>
<body>
<div>Border-left-color property with a hexadecimal value.</div>
</body>
</html>Beispiel für die border-left-color-Eigenschaft mit einem RGB-Wert:
Beispiel für die CSS border-left-color-Eigenschaft mit RGB-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<div>Border-left-color property with a RGB value.</div>
</body>
</html>Beispiel für die border-left-color-Eigenschaft mit einem HSL-Wert:
Beispiel für die CSS border-left-color-Eigenschaft mit HSL-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<div>Border-left-color property with a HSL value.</div>
</body>
</html>Werte
| Wert | Beschreibung | Testen |
|---|---|---|
| color | Definiert die Farbe des linken Rahmens. Standardfarbe ist die Farbe des aktuellen Elements. Es können Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() verwendet werden. Erforderlicher Wert. | Testen » |
| transparent | Wendet eine transparente Farbe auf den linken Rahmen an. Der linke Rahmen nimmt weiterhin den durch den Wert border-width definierten Raum ein. | Testen » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Testen » |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Praxis
Was ist gemäß den bereitgestellten Informationen korrekt über die CSS-Eigenschaft 'border-left-color'?