CSS outline-width-Eigenschaft
Die outline-width-Eigenschaft definiert die Breite eines Outline. Eine Outline ist eine Linie, die um ein Element gezeichnet wird. Sie unterscheidet sich jedoch von der Border-Eigenschaft.
Die Breite und Höhe eines Elements schließen die Outline-Breite nicht ein, da die Outline nicht als Teil der Abmessungen des Elements betrachtet wird.
Diese Eigenschaft akzeptiert die folgenden Werte: medium, thin, thick, length, initial, inherit, revert und unset.
INFO
Bevor Sie die outline-width festlegen, sollten Sie die outline-style-Eigenschaft auf einen Wert ungleich none setzen, damit die Breite sichtbar ist.
| Anfangswert | medium |
|---|---|
| Anwendbar auf | Alle Elemente. |
| Vererbbar | Nein. |
| Animierbar | Ja. Die Breite der Outline ist animierbar. |
| Version | CSS2 |
| DOM-Syntax | Object.style.outlineWidth = "thick"; |
Syntax
CSS outline-width-Syntax
outline-width: medium | thin | thick | length | initial | inherit | revert | unset;Beispiel für mehrere Werte
CSS outline-width-Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.p1 {
outline-style: solid;
outline-width: 5px;
}
.p2 {
outline-style: solid;
outline-width: 0.4em;
}
.p3 {
outline-style: solid;
outline-width: thin;
}
.p4 {
outline-style: solid;
outline-width: medium;
}
.p5 {
outline-style: solid;
outline-width: thick;
}
.p6 {
outline-style: solid;
outline-width: 0.1cm;
}
.p7 {
outline-style: solid;
outline-width: 1mm;
}
</style>
</head>
<body>
<h2>Outline-width property example</h2>
<p class="p1">This is a paragraph with outline set to 5px.</p>
<p class="p2">This is a paragraph with outline set to 0.4em.</p>
<p class="p3">This is a paragraph with outline set to thin.</p>
<p class="p4">This is a paragraph with outline set to medium.</p>
<p class="p5">This is a paragraph with outline set to thick.</p>
<p class="p6">This is a paragraph with outline set to 0.1cm.</p>
<p class="p7">This is a paragraph with outline set to 1 mm.</p>
</body>
</html>Ergebnis
Im folgenden Beispiel hat das erste Element keinen Rand, das zweite schon. Beachten Sie, dass die Outline des zweiten Elements außerhalb seines Rands liegt.
Outline mit einem Rand
CSS outline-width weiteres Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.ex1 {
outline-style: solid;
outline-width: thick;
}
div.ex2 {
border: 2px solid #1c87c9;
outline-style: solid;
outline-width: thick;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div class="ex1">Lorem Ipsum is simply dummy text of the printing...</div>
<br />
<div class="ex2">Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>Grundlegendes Outline-Beispiel
Beispiel für die CSS outline-width-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 2px solid #1c87c9;
outline-style: dotted;
outline-width: 3px;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div>Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>Kombination von outline-width und outline-style
Beispiel für die CSS outline-width-Eigenschaft in Kombination mit der outline-style-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 2px solid #1c87c9;
outline-style: dashed;
outline-width: thick;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div>Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>Werte
| Wert | Beschreibung | Ausführen |
|---|---|---|
| medium | Definiert eine mittlere Outline. Dies ist der Standardwert dieser Eigenschaft. | Ausführen » |
| thin | Definiert eine dünne Outline. | Ausführen » |
| thick | Definiert eine dicke Outline. | Ausführen » |
| length | Definiert die Dicke der Outline. | Ausführen » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausführen » |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. | |
| revert | Setzt die Eigenschaft auf den vom Benutzeragenten oder der vorherigen Kaskade festgelegten Wert zurück. | |
| unset | Setzt die Eigenschaft auf ihren vererbten oder initialen Wert zurück, je nach Vererbung. |
Praxis
Welche möglichen Werte kann die 'outline-width'-Eigenschaft in CSS annehmen?