outline-style CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die CSS-Eigenschaft outline-style legt den Stil der Outline eines Elements fest. Eine Outline ist eine Linie, die um ein Element herum außerhalb des border gezeichnet wird.
Beim Definieren des Erscheinungsbilds einer Outline ist es häufig praktischer, die Kurzform-Eigenschaft outline zu verwenden.
Probieren Sie es aus
outline-style: none;
outline-style: dotted;
outline-style: solid;
outline-style: groove;
outline-style: inset;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with an outline around it.
</div>
</section>
#example-element {
outline: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
}
Syntax
/* Keyword values */
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;
/* Global values */
outline-style: inherit;
outline-style: initial;
outline-style: revert;
outline-style: revert-layer;
outline-style: unset;
Werte
Diese Eigenschaft wird als einer der folgenden Werte angegeben:
auto-
Ermöglicht es dem User Agent, einen benutzerdefinierten Outline-Stil zu rendern.
none-
Es wird keine Outline verwendet.
dotted-
Die Outline besteht aus einer Reihe von Punkten.
dashed-
Die Outline besteht aus einer Reihe kurzer Liniensegmente.
solid-
Die Outline ist eine einzelne Linie.
double-
Die Outline besteht aus zwei einzelnen Linien. Die
outline-widthist die Summe der beiden Linien und des Zwischenraums zwischen ihnen. groove-
Die Outline sieht aus, als wäre sie in die Seite eingraviert.
ridge-
Das Gegenteil von
groove: Die Outline sieht aus, als wäre sie aus der Seite herausgeprägt. inset-
Die Outline lässt die Box so aussehen, als wäre sie in die Seite eingebettet.
outset-
Das Gegenteil von
inset: Die Outline lässt die Box so aussehen, als würde sie aus der Seite herausragen.
Formale Definition
| Anfangswert | none |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | by computed value type |
Formale Syntax
outline-style =
auto |
<outline-line-style>
<outline-line-style> =
none |
auto |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
Beispiele
Outline-Stil auf auto setzen
Der Wert auto kennzeichnet einen benutzerdefinierten Outline-Stil, der in der Spezifikation als „typischerweise ein Stil [der] entweder eine Benutzeroberflächen-Standardeinstellung für die Plattform ist oder möglicherweise ein Stil, der umfangreicher ist, als er in CSS detailliert beschrieben werden kann, z. B. eine Outline mit abgerundeten Kanten und halbtransparenten äußeren Pixeln, die zu leuchten scheint“ beschrieben wird.
HTML
<div>
<p class="auto">Outline Demo</p>
</div>
CSS
.auto {
outline-style: auto; /* same result as "outline: auto" */
}
/* To make the Demo clearer */
* {
outline-width: 10px;
padding: 15px;
}
Ergebnis
Outline-Stil auf dashed und dotted setzen
HTML
<div>
<div class="dotted">
<p class="dashed">Outline Demo</p>
</div>
</div>
CSS
.dotted {
outline-style: dotted; /* same result as "outline: dotted" */
}
.dashed {
outline-style: dashed;
}
/* To make the Demo clearer */
* {
outline-width: 10px;
padding: 15px;
}
Ergebnis
Outline-Stil auf solid und double setzen
HTML
<div>
<div class="solid">
<p class="double">Outline Demo</p>
</div>
</div>
CSS
.solid {
outline-style: solid;
}
.double {
outline-style: double;
}
/* To make the Demo clearer */
* {
outline-width: 10px;
padding: 15px;
}
Ergebnis
Outline-Stil auf groove und ridge setzen
HTML
<div>
<div class="groove">
<p class="ridge">Outline Demo</p>
</div>
</div>
CSS
.groove {
outline-style: groove;
}
.ridge {
outline-style: ridge;
}
/* To make the Demo clearer */
* {
outline-width: 10px;
padding: 15px;
}
Ergebnis
Outline-Stil auf inset und outset setzen
HTML
<div>
<div class="inset">
<p class="outset">Outline Demo</p>
</div>
</div>
CSS
.inset {
outline-style: inset;
}
.outset {
outline-style: outset;
}
/* To make the Demo clearer */
* {
outline-width: 10px;
padding: 15px;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Basic User Interface Module Level 4 # outline-style |