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 der Umrandung eines Elements fest. Eine Umrandung ist eine Linie, die um ein Element außerhalb des border gezeichnet wird.
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 praktischer, die Kurzform-Eigenschaft outline zu verwenden, um das Aussehen einer Umrandung zu definieren.
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;
Die outline-style Eigenschaft wird mit einem der unten aufgeführten Werte angegeben.
Werte
auto-
Ermöglicht dem Benutzeragenten, einen benutzerdefinierten Umrandungsstil zu rendern.
none-
Es wird keine Umrandung verwendet.
dotted-
Die Umrandung besteht aus einer Reihe von Punkten.
dashed-
Die Umrandung besteht aus einer Reihe von kurzen Liniensegmenten.
solid-
Die Umrandung ist eine durchgehende Linie.
double-
Die Umrandung besteht aus zwei parallelen Linien. Die
outline-widthist die Summe der beiden Linien und des Abstands dazwischen. groove-
Die Umrandung sieht aus, als wäre sie in die Seite geschnitzt.
ridge-
Das Gegenteil von
groove: Die Umrandung sieht aus, als wäre sie aus der Seite herausgeprägt. inset-
Die Umrandung lässt die Box so aussehen, als wäre sie in die Seite eingebettet.
outset-
Das Gegenteil von
inset: Die Umrandung 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
Umrandungsstil auf auto setzen
Der auto Wert gibt einen benutzerdefinierten Umrandungsstil an, der in der Spezifikation beschrieben wird als "typischerweise ein Stil, [der] entweder ein Benutzeroberflächestandard für die Plattform ist, oder vielleicht ein Stil, der reicher ist, als er im Detail in CSS beschrieben werden kann, z.B. eine abgerundete Umrandung mit halbtransparenten äußeren Pixeln, die zu leuchten scheinen".
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
Umrandungsstil 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
Umrandungsstil auf durchgehend 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
Umrandungsstil auf vertieft und erhöht 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
Umrandungsstil auf eingebettet und vorstehend 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 |