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 Kontur eines Elements fest. Eine Kontur ist eine Linie, die um ein Element 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 Kurzform-Eigenschaft outline zu verwenden, wenn das Erscheinungsbild einer Kontur 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;
Die outline-style Eigenschaft wird als einer der unten aufgeführten Werte angegeben.
Werte
auto-
Erlaubt dem Benutzeragenten, einen benutzerdefinierten Konturstil zu rendern.
none-
Es wird keine Kontur verwendet. Die
outline-widthist0. dotted-
Die Kontur ist eine Reihe von Punkten.
dashed-
Die Kontur ist eine Reihe von kurzen Liniensegmenten.
solid-
Die Kontur ist eine einzelne Linie.
double-
Die Kontur besteht aus zwei einzelnen Linien. Die
outline-widthist die Summe der beiden Linien und des Zwischenraums. groove-
Die Kontur sieht aus, als wäre sie in die Seite geschnitzt.
ridge-
Das Gegenteil von
groove: Die Kontur sieht aus, als wäre sie aus der Seite herausgehoben. inset-
Die Kontur lässt die Box so aussehen, als wäre sie in die Seite eingebettet.
outset-
Das Gegenteil von
inset: Die Kontur lässt die Box so aussehen, als käme sie aus der Seite heraus.
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 auto-Wert zeigt einen benutzerdefinierten Konturstil an, der in der Spezifikation beschrieben wird als "typischerweise ein Stil [der] entweder eine Benutzeroberflächen-Voreinstellung für die Plattform ist oder vielleicht ein Stil, der reicher ist, als im Detail in CSS beschrieben werden kann, z. B. ein abgerundeter Kantenstil mit halbtransparenten äußeren Pixeln, die 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
Outline-Stil 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
Outline-Stil 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
Outline-Stil auf Rillen und Kante 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 eingesenkt und erhaben 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 |