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 outline-style CSS-Eigenschaft legt den Stil des Umrisses eines Elements fest. Ein Umriss ist eine Linie, die um ein Element herum gezeichnet wird, außerhalb des border.
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;
}
Es ist oft bequemer, die Kurzschreibweise outline zu verwenden, wenn das Erscheinungsbild eines Umrisses definiert wird.
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-
Erlaubt dem User-Agent, einen benutzerdefinierten Umrissstil darzustellen.
none-
Es wird kein Umriss verwendet.
dotted-
Der Umriss ist eine Reihe von Punkten.
dashed-
Der Umriss besteht aus einer Reihe von kurzen Liniensegmenten.
solid-
Der Umriss ist eine einzelne Linie.
double-
Der Umriss besteht aus zwei einzelnen Linien. Die
outline-widthist die Summe der beiden Linien und dem Raum dazwischen. groove-
Der Umriss sieht aus, als wäre er in die Seite eingeschnitten.
ridge-
Das Gegenteil von
groove: Der Umriss sieht aus, als wäre er aus der Seite herausgehoben. inset-
Der Umriss lässt die Box so aussehen, als wäre sie in die Seite eingebettet.
outset-
Das Gegenteil von
inset: Der Umriss lässt die Box so aussehen, als würde sie aus der Seite herauskommen.
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
Umrissstil auf auto setzen
Der Wert auto weist auf einen benutzerdefinierten Umrissstil hin, der in der Spezifikation beschrieben wird als "typischerweise ein Stil [der] entweder ein Benutzeroberflächendefault für die Plattform ist oder vielleicht ein Stil, der reicher ist, als im Detail in CSS beschrieben werden kann, z. B. ein Umriss mit abgerundeten Kanten und halbtransluzenten äußeren Pixeln, der zu leuchten scheint".
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
Umrissstil auf gestrichelt und gepunktet 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
Umrissstil auf durchgezogen und doppelt 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
Umrissstil auf Einkerbung und Erhebung 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
Umrissstil auf vertieft und hervorstehend 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 |