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 July 2015.
Die outline-style
CSS Eigenschaft legt den Stil der Kontur eines Elements fest. Eine Kontur ist eine Linie, die um ein Element herum gezeichnet wird, außerhalb der 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 Kurzschreibweiseigenschaft outline
zu verwenden, wenn das Aussehen 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 darzustellen.
none
-
Es wird keine Kontur verwendet. Die
outline-width
ist0
. dotted
-
Die Kontur besteht aus einer Reihe von Punkten.
dashed
-
Die Kontur besteht aus einer Reihe kurzer Liniensegmente.
solid
-
Die Kontur ist eine einzelne Linie.
double
-
Die Kontur besteht aus zwei einzelnen Linien. Die
outline-width
ist die Summe der beiden Linien und des Raums dazwischen. groove
-
Die Kontur sieht aus, als wäre sie in die Seite eingraviert.
ridge
-
Das Gegenteil von
groove
: Die Kontur sieht aus, als wäre sie aus der Seite extrudiert. inset
-
Die Kontur lässt das Element so aussehen, als wäre es in die Seite eingebettet.
outset
-
Das Gegenteil von
inset
: Die Kontur lässt das Element so aussehen, als käme es 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>
Beispiele
Konturstil auf auto setzen
Der Wert auto
gibt einen benutzerdefinierten Konturstil an, der in der Spezifikation beschrieben wird als "typischerweise ein Stil [der] entweder eine Benutzerschnittstelle-Standardeinstellung für die Plattform ist oder möglicherweise ein Stil, der reicher ist, als im Detail in CSS beschrieben werden kann, z. B. eine Kontur mit abgerundeten Kanten und halbtransluzenten äußeren Pixeln, 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 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
Konturstil 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
Konturstil 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
Specification |
---|
CSS Basic User Interface Module Level 4 # outline-style |