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
|
---
title: '-moz-outline-radius'
slug: Web/CSS/-moz-outline-radius
tags:
- CSS
- CSS Referenz
- NeedsLiveSample
- Non-standard
translation_of: Web/CSS/-moz-outline-radius
---
<div>{{Non-standard_header}}{{CSSRef}}</div>
<h2 id="Übersicht">Übersicht</h2>
<p>In Mozilla Anwendungen wie Firefox kann die <code>-moz-outline-radius</code> CSS Eigenschaft dazu verwendet werden, um Umrissen runde Ecken zu verleihen. Ein {{cssxref("outline", "Umriss")}} ist eine Linie, die um Elemente gezeichnet wird, außerhalb des Randes, um das Element hervorzuheben.</p>
<p><code>-moz-outline-radius</code> ist eine praktische Kurzschreibweise, um die vier Eigenschaften {{cssxref("-moz-outline-radius-topleft")}}, {{cssxref("-moz-outline-radius-topright")}}, {{cssxref("-moz-outline-radius-bottomright")}} und {{cssxref("-moz-outline-radius-bottomleft")}} zu setzen.</p>
<p>{{cssinfo}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="brush:css">/* Ein Wert */
-moz-outline-radius: 25px;
/* Zwei Werte */
-moz-outline-radius: 25px 1em;
/* Drei Werte */
-moz-outline-radius: 25px 1em 12%;
/* Vier Werte */
-moz-outline-radius: 25px 1em 12% 4mm;
/* Globale Werte */
-moz-outline-radius: inherit;
-moz-outline-radius: initial;
-moz-outline-radius: unset;
</pre>
<h3 id="Werte">Werte</h3>
<div class="note">Elliptische Umrisse und <code><percentage></code> Werte folgen der in {{cssxref("border-radius")}} beschriebenen Syntax.</div>
<p>Ein, zwei, drei oder vier <code><outline-radius></code> Werte, die jeweils einem dieser Werte entsprechen:</p>
<dl>
<dt><length></dt>
<dd>Siehe {{cssxref("<length>")}} für mögliche Werte.</dd>
<dt><percentage></dt>
<dd>Eine {{cssxref("<percentage>")}}; siehe {{cssxref("border-radius")}} für Details.</dd>
</dl>
<ul>
<li>Falls ein einzelner Wert gesetzt ist, wird er auf alle 4 Ecken angewendet.</li>
<li>Falls zwei Werte gesetzt sind, bezieht sich der erste auf die linke obere und die rechte untere Ecke und der zweite auf die rechte obere und die linke untere Ecke.</li>
<li>Falls drei Werte gesetzt sind, bezieht sich der erste auf die linke obere Ecke, der zweite auf die rechte obere und die linke untere Ecke und der dritte auf die rechte untere Ecke.</li>
<li>Falls vier Werte gesetzt sind, bezieht sich der erste auf die linke obere Ecke, der zweite auf die rechte obere Ecke, der dritte auf die rechte untere Ecke und der vierte auf die linke untere Ecke.</li>
</ul>
<h3 id="Formale_Syntax">Formale Syntax</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Beispiele">Beispiele</h2>
<pre class="brush:css">outline: dotted red;
-moz-outline-radius: 12% 1em 25px;
/* ist gleichbedeutend mit: */
-moz-outline-radius-topleft: 12%;
-moz-outline-radius-topright: 1em;
-moz-outline-radius-bottomright: 35px;
-moz-outline-radius-bottomleft: 1em;</pre>
<h2 id="Hinweise">Hinweise</h2>
<ul>
<li><code>dotted</code> oder <code>dashed</code> abgerundete Ecken werden durchgehend dargestellt, {{bug("382721")}}.</li>
<li>Zukünftige Versionen von Gecko/Firefox entfernen möglicherweise diese Eigenschaft vollständig. Siehe {{bug("593717")}}.</li>
</ul>
<h2 id="Spezifikationen">Spezifikationen</h2>
<p>Diese Eigenschaft ist in keinem CSS Standard definiert.</p>
<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Merkmal</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Grundlegende Unterstützung</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoDesktop("1.8")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Merkmal</th>
<th>Android</th>
<th>Android Webview</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Grundlegende Unterstützung</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoMobile("1.8")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
|
