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 April 2017.

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 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 Kurzschreibweise outline zu verwenden, wenn man das Erscheinungsbild einer Kontur festlegt.

Syntax

css
/* 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 es dem Benutzeragenten, einen benutzerdefinierten Konturstil darzustellen.

none

Es wird keine Kontur verwendet. Die outline-width ist 0.

dotted

Die Kontur besteht aus einer Reihe von Punkten.

dashed

Die Kontur besteht aus einer Reihe von kurzen Liniensegmenten.

solid

Die Kontur ist eine durchgehende Linie.

double

Die Kontur besteht aus zwei 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 herausgedrückt.

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

Anfangswertnone
Anwendbar aufalle Elemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypby 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 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. eine Kontur mit abgerundeten Kanten und halbtransparenten äußeren Pixeln, die zu glühen scheint", beschrieben wird.

HTML

html
<div>
  <p class="auto">Outline Demo</p>
</div>

CSS

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

html
<div>
  <div class="dotted">
    <p class="dashed">Outline Demo</p>
  </div>
</div>

CSS

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

html
<div>
  <div class="solid">
    <p class="double">Outline Demo</p>
  </div>
</div>

CSS

css
.solid {
  outline-style: solid;
}
.double {
  outline-style: double;
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

Ergebnis

Konturstil auf eingelassen und erhaben setzen

HTML

html
<div>
  <div class="groove">
    <p class="ridge">Outline Demo</p>
  </div>
</div>

CSS

css
.groove {
  outline-style: groove;
}
.ridge {
  outline-style: ridge;
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

Ergebnis

Konturstil auf eingefügt und herausgesetzt setzen

HTML

html
<div>
  <div class="inset">
    <p class="outset">Outline Demo</p>
  </div>
</div>

CSS

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

Siehe auch