1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
---
title: outline
slug: Web/CSS/outline
tags:
- CSS
- CSS Eigenschaft
- CSS Outline
- Layout
- Referenz
- 'recipe:css-shorthand-property'
translation_of: Web/CSS/outline
---
<div>{{CSSRef}}</div>
<p>Das <strong><code>outline</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Shorthand_properties">Eigenschaftskürzel</a> setzt alle outline Eigenschaften in einer einzigen Deklaration.</p>
<div>{{EmbedInteractiveExample("pages/css/outline.html")}}</div>
<div class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</div>
<h2 id="Bestandteileigenschaften"><strong class="b5">Bestandteileigenschaften</strong></h2>
<p>Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:</p>
<ul>
<li><a href="/en-US/docs/Web/CSS/outline-color"><code>outline-color</code></a></li>
<li><a href="/en-US/docs/Web/CSS/outline-style"><code>outline-style</code></a></li>
<li><a href="/en-US/docs/Web/CSS/outline-width"><code>outline-width</code></a></li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="brush: css no-line-numbers notranslate">/* 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;
</pre>
<p>Die <code>outline</code> Eigenschaft kann mit einem, zwei oder drei der unten aufgeführten Werte angegeben werden. Die Reihenfolge der Werte spielt dabei keine Rolle.</p>
<div class="note">
<p><strong>Hinweis:</strong> 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: <code>none</code>. Eine bemerkenswerte Ausnahme bilden <code>input</code> Elemente, die von den Browsern als Standard-Stil vorgegeben werden.</p>
</div>
<h3 id="Values">Values</h3>
<dl>
<dt><code><'outline-color'></code></dt>
<dd>Legt die Farbe des Umrisses fest. Standardeinstellung ist die <code>currentcolor</code> (aktuelle Farbe), wenn sie nicht vorhanden ist. Siehe {{cssxref("outline-color")}}.</dd>
<dt><code><'outline-style'></code></dt>
<dd>Legt den Stil des Umrisses fest. Standardeinstellung ist <code>none</code>, wenn nicht vorhanden. Siehe {{cssxref("outline-style")}}.</dd>
<dt><code><'outline-width'></code></dt>
<dd>Legt die Dicke der Umrisslinie fest. Standardeinstellung ist <code>medium</code>, wenn nicht vorhanden. Siehe {{cssxref("outline-width")}}.</dd>
</dl>
<h2 id="Beschreibung">Beschreibung</h2>
<p><a href="/de/docs/Web/CSS/border">Borders</a> und <code>outline</code> sind sehr ähnlich. Allerdings unterscheiden sich die Umrisse von den Grenzen in den folgenden Punkten:</p>
<ul>
<li>Outlines nehmen nie Raum ein, da sie außerhalb des Inhalts eines Elements gezeichnet werden.</li>
<li>
<p>Gemäß der Spezifikation müssen Umrisse nicht rechteckig sein, obwohl sie es normalerweise sind.</p>
</li>
</ul>
<p>Wie bei allen Kurzform-Eigenschaften werden alle ausgelassenen Unterwerte auf ihren <a href="/de/docs/Web/CSS/Initialwert">Initialwert</a> gesetzt.</p>
<h2 id="Bedenken_zu_Zugänglichkeit">Bedenken zu Zugänglichkeit</h2>
<p>Wenn Sie <code>outline</code> den Wert von <code>0</code> oder <code>none</code> 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.</p>
<ul>
<li><a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">How to Design Useful and Usable Focus Indicators</a></li>
<li>
<p><abbr>WCAG</abbr> 2.1: <a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html">Understanding Success Criterion 2.4.7: Focus Visible</a></p>
</li>
</ul>
<h2 id="Formale_Definition">Formale Definition</h2>
<p>{{cssinfo}}</p>
<h2 id="Formale_Syntax">Formale Syntax</h2>
{{csssyntax}}
<h2 id="Beschreibung_2">Beschreibung</h2>
<h3 id="Verwendung_von_Umrissen_zum_Setzen_eines_Fokusstils">Verwendung von Umrissen zum Setzen eines Fokusstils</h3>
<h4 id="HTML">HTML</h4>
<div id="Using_outline_to_set_a_focus_style">
<pre class="brush: html notranslate"><a href="#">This link has a special focus style.</a>
</pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">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;
}
</pre>
</div>
<h4 id="Ergebnis">Ergebnis</h4>
<p>{{EmbedLiveSample("Using_outline_to_set_a_focus_style", "100%", 60)}}</p>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Basic UI', '#outline', 'outline')}}</td>
<td>{{Spec2('CSS3 Basic UI')}}</td>
<td>Keine Änderung.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Anfangsdefinition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
<div>
<p>{{Compat("css.properties.outline")}}</p>
</div>
|
