outline-style
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die outline-style CSS Eigenschaft legt den Stil der Kontur eines Elements fest. Eine Kontur ist eine Linie, die um ein Element gezogen 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 praktischer, 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-
Ermöglicht es dem User-Agent, 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 kurzer Liniensegmente.
solid-
Die Kontur ist eine durchgehende Linie.
double-
Die Kontur besteht aus zwei durchgehenden Linien. Die
outline-widthist die Summe der beiden Linien und des Raums dazwischen. 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 herausgedrückt. inset-
Die Kontur lässt die Box eingebettet in der Seite erscheinen.
outset-
Das Gegenteil von
inset: Die Kontur lässt die Box 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>
Beispiele
Konturstil auf auto setzen
Der Wert auto gibt einen benutzerdefinierten Konturstil an, wie in der Spezifikation beschrieben "normalerweise ein Stil [der] entweder ein Benutzeroberfläche-Standard für die Plattform ist oder vielleicht ein reicherer Stil, als er im Detail in CSS beschrieben werden kann, z.B. eine abgerundete Kantenkontur mit halbtransparenter äußerer Pixel, die 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
Konturstil 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
Konturstil 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
Konturstil auf Rille und Kamm 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
Konturstil auf eingelassen und herausgesetzt 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
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # outline-style |
Browser-Kompatibilität
Loading…