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-Eigenschaft von CSS legt den Stil der Umrandung eines Elements fest. Eine Umrandung 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 praktischer, die Kurzform-Eigenschaft outline zu verwenden, um das Erscheinungsbild einer Umrandung zu definieren.

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 Umrandungsstil darzustellen.

none

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

dotted

Die Umrandung besteht aus einer Reihe von Punkten.

dashed

Die Umrandung besteht aus einer Reihe kurzer Liniensegmente.

solid

Die Umrandung ist eine durchgehende Linie.

double

Die Umrandung besteht aus zwei durchgehenden Linien. Die outline-width ist die Summe der beiden Linien und des Raums zwischen ihnen.

groove

Die Umrandung sieht aus, als wäre sie in die Seite eingraviert.

ridge

Das Gegenteil von groove: Die Umrandung sieht aus, als wäre sie aus der Seite herausgedrückt.

inset

Die Umrandung lässt die Box so aussehen, als wäre sie in die Seite eingebettet.

outset

Das Gegenteil von inset: Die Umrandung 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

Umrandungsstil auf auto setzen

Der Wert auto gibt einen benutzerdefinierten Umrandungsstil an, der in der Spezifikation beschrieben wird als "typischerweise ein Stil [der] entweder ein Benutzeroberflächen-Standard für die Plattform ist oder möglicherweise ein Stil, der reicher ist, als in CSS im Detail beschrieben werden kann, z.B. eine Umrandung mit abgerundeten Kanten und halbtransluszenten äußeren Pixeln, die zu leuchten scheinen".

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

Umrandungsstil 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

Umrandungsstil auf solid und double 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

Umrandungsstil auf groove und ridge 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

Umrandungsstil auf inset und outset 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