outline
Baseline 2023Newly available
Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Die outline
CSS Kurzform-Eigenschaft definiert die meisten Outline-Eigenschaften in einer einzigen Deklaration.
Probieren Sie es aus
Zusammengesetzte Eigenschaften
Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:
Syntax
/* style */
outline: solid;
/* style | color */
outline: dashed #f66;
/* width | style */
outline: thick inset;
/* width | style | color*/
outline: 3px solid green;
/* Global values */
outline: inherit;
outline: initial;
outline: revert;
outline: revert-layer;
outline: unset;
Die Eigenschaft outline
kann mit einem, zwei oder drei der unten aufgeführten Werte angegeben werden. Die Reihenfolge der Werte spielt keine Rolle. Wie bei allen Kurzform-Eigenschaften werden alle ausgelassenen Teilwerte auf ihren Initialwert gesetzt.
Hinweis:
Die Outline wird für viele Elemente unsichtbar sein, wenn ihr Stil nicht definiert ist. Das liegt daran, dass der Standardstil none
ist. Eine bemerkenswerte Ausnahme bilden input
-Elemente, die von den Browsern mit einem Standardstil versehen werden.
Werte
<'outline-width'>
-
Legt die Dicke der Outline fest. Standardwert ist
medium
, falls nicht angegeben. Sieheoutline-width
. <'outline-style'>
-
Legt den Stil der Outline fest. Standardwert ist
none
, falls nicht angegeben. Sieheoutline-style
. <'outline-color'>
-
Legt die Farbe der Outline fest. Standardwert ist
invert
bei unterstützenden Browsern, ansonstencurrentcolor
. Sieheoutline-color
.
Beschreibung
Die Outline ist eine Linie außerhalb des border eines Elements. Im Gegensatz zu anderen Bereichen der Box nimmt die Outline keinen Platz ein und beeinflusst somit das Layout des Dokuments in keiner Weise.
Es gibt einige Eigenschaften, die das Erscheinungsbild einer Outline beeinflussen. Der Stil, die Farbe und die Breite können mit der outline
-Eigenschaft geändert werden, der Abstand vom Rand mit der outline-offset
-Eigenschaft und die Eckenwinkel mit der border-radius
-Eigenschaft.
Eine Outline muss nicht rechteckig sein: Bei mehrzeiligem Text zeichnen einige Browser für jede Zeilenbox separat eine Outline, während andere den gesamten Text mit einer einzigen Outline umrahmen.
Barrierefreiheit
Das Zuweisen des Wertes 0
oder none
zur Eigenschaft outline
entfernt den Standard-Fokus-Stil des Browsers. Wenn ein Element interaktiv ist, muss es einen sichtbaren Fokus-Indikator haben. Sorgen Sie für deutliche Fokus-Stilierungen, falls der Standard-Fokus-Stil entfernt wird.
Formale Definition
Anfangswert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Nein |
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | wie die jeweiligen Kurzschreibweisen:
|
Formale Syntax
outline =
<'outline-width'> ||
<'outline-style'> ||
<'outline-color'>
<outline-width> =
<line-width>
<outline-style> =
auto |
<outline-line-style>
<outline-color> =
auto |
<color> |
<image-1D>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
<image-1D> =
<stripes()>
<stripes()> =
stripes( <color-stripe># )
<color-stripe> =
<color> &&
[ <length-percentage> | <flex> ]?
<length-percentage> =
<length> |
<percentage>
Beispiele
Verwendung von Outline, um einen Fokus-Stil zu setzen
HTML
<a href="#">This link has a special focus style.</a>
CSS
a {
border: 1px solid;
border-radius: 3px;
display: inline-block;
margin: 10px;
padding: 5px;
}
a:focus {
outline: 4px dotted #e73;
outline-offset: 4px;
background: #ffa;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Basic User Interface Module Level 4 # outline |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
outline |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- Requires a vendor prefix or different name for use.
- Has more compatibility info.