outline
Try it
Das outline
CSS Eigenschaftskürzel (en-US) setzt alle outline Eigenschaften in einer einzigen Deklaration.
Bestandteileigenschaften
Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:
Syntax
/* style */
outline: solid;
/* color | style */
outline: #f66 dashed;
/* style | width */
outline: inset thick;
/* color | style | width */
outline: green solid 3px;
/* Global values */
outline: inherit;
outline: initial;
outline: unset;
Die outline
Eigenschaft kann mit einem, zwei oder drei der unten aufgeführten Werte angegeben werden. Die Reihenfolge der Werte spielt dabei keine Rolle.
Hinweis: Der Umriss ist für viele Elemente unsichtbar, wenn sein Stil nicht definiert ist. Dies liegt daran, dass der Stil standardmäßig auf keinen Stil eingestellt ist: none
. Eine bemerkenswerte Ausnahme bilden input
Elemente, die von den Browsern als Standard-Stil vorgegeben werden.
Values
<'outline-color'>
- Legt die Farbe des Umrisses fest. Standardeinstellung ist die
currentcolor
(aktuelle Farbe), wenn sie nicht vorhanden ist. Sieheoutline-color
. <'outline-style'>
- Legt den Stil des Umrisses fest. Standardeinstellung ist
none
, wenn nicht vorhanden. Sieheoutline-style
(en-US). <'outline-width'>
- Legt die Dicke der Umrisslinie fest. Standardeinstellung ist
medium
, wenn nicht vorhanden. Sieheoutline-width
(en-US).
Beschreibung
Borders und outline
sind sehr ähnlich. Allerdings unterscheiden sich die Umrisse von den Grenzen in den folgenden Punkten:
- Outlines nehmen nie Raum ein, da sie außerhalb des Inhalts eines Elements gezeichnet werden.
-
Gemäß der Spezifikation müssen Umrisse nicht rechteckig sein, obwohl sie es normalerweise sind.
Wie bei allen Kurzform-Eigenschaften werden alle ausgelassenen Unterwerte auf ihren Initialwert gesetzt.
Bedenken zu Zugänglichkeit
Wenn Sie outline
den Wert von 0
oder none
zuweisen, wird der Standard-Fokussierungsstil des Browsers entfernt. Wenn ein Element mit ihm interagiert werden kann, muss es einen sichtbaren Fokusindikator haben. Sorgen Sie für eine offensichtliche Fokusgestaltung, wenn der Standardfokusstil entfernt wird.
Formale Definition
Initialwert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Nein |
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | wie die jeweiligen Kurzschreibweisen: |
Formale Syntax
Beschreibung
Verwendung von Umrissen zum Setzen eines Fokusstils
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
Spezifikation | Status | Kommentar |
---|---|---|
CSS Basic User Interface Module Level 3 Die Definition von 'outline' in dieser Spezifikation. |
Empfehlung | Keine Änderung. |
CSS Level 2 (Revision 1) Die Definition von 'outline' in dieser Spezifikation. |
Empfehlung | Anfangsdefinition |
Browser Kompatibilität
BCD tables only load in the browser