Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
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 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-widthist0. 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-widthist 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 |
Browser-Kompatibilität
Loading...