blob: 6408ec4e95427d96542e776c7f17fce7b5bc90c2 (
plain)
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
|
---
title: outline
slug: Web/CSS/outline
translation_of: Web/CSS/outline
---
<div>{{CSSRef}}</div>
<h2 id="Sumário">Sumário</h2>
<p>A propriedade <a href="/en-US/docs/CSS">CSS</a> <strong><code>outline</code></strong> é uma propriedade abreviada para configurar uma ou mais das propriedades de contorno {{cssxref("outline-style")}}, {{cssxref("outline-width")}} e {{cssxref("outline-color")}} em uma única declaração. Na maioria dos casos o uso abreviado é preferível e mais conveniente.</p>
<p>Contornos se diferenciam de bordas das seguintes maneiras:</p>
<ul>
<li>Contornos não ocupam espaços, eles são desenhados acima do conteúdo.</li>
<li>Contornos podem não ser retangulares. Eles são retangulares no Gecko/Firefox. Mas por exemplo, Opera desenha uma forma não retangular em torno de uma construção como este:<br>
<strong style="color: orange;">TEXT<span style="font-size: xx-large;">TEXT</span>TEXT</strong></li>
</ul>
<div>{{cssinfo}}</div>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="brush: css">/* largura | estilo | cor */
outline: 1px solid white;
/* Valores globais */
outline: inherit;
outline: initial;
outline: unset;
</pre>
<h3 id="Valores">Valores</h3>
<p>Um, dois ou três valores, dada em ordem arbitrária:</p>
<dl>
<dt><code><'outline-width'></code></dt>
<dd>Veja {{Cssxref("outline-width")}}.</dd>
<dt><code><'outline-style'></code></dt>
<dd>Veja {{Cssxref("outline-style")}}.</dd>
<dt><code><'outline-color'></code></dt>
<dd>Desde Gecko 1.9 (Firefox 3), o valor da propriedade {{Cssxref("color")}} (cor de primeiro plano) é usado. Veja {{Cssxref("outline-color")}}.</dd>
</dl>
<h3 id="Sintaxe_completa">Sintaxe completa</h3>
{{csssyntax}}
<h2 id="Exemplos">Exemplos</h2>
<p><span style="outline: solid;">outline: solid;</span> | <span style="outline: dashed red;">outline: dashed red;</span> | <span style="outline: dotted 1px;">outline: dotted 1px;</span> | <span style="outline: ridge thick violet;">outline: ridge thick violet;</span> | <span style="outline: ridge 5px yellow;">outline: custom 5px;</span></p>
<pre class="brush: css">/* duas declarações identicas */
:link:hover { outline: 1px solid #000; }
:link:hover { outline: solid black 1px; }</pre>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Estado</th>
<th scope="col">Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Basic UI', '#outline', 'outline')}}</td>
<td>{{Spec2('CSS3 Basic UI')}}</td>
<td>No change</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>1.0</td>
<td>1.5 (1.8)<sup>[1]</sup></td>
<td>8.0</td>
<td>7.0</td>
<td>1.2 (125)</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>1.0</td>
<td>{{CompatGeckoMobile(1.8)}} [1]</td>
<td>8.0</td>
<td>6.0</td>
<td>3.1</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Em navegadores anteriores à <a href="/en-US/docs/Gecko">Gecko</a> 1.8 (<a href="/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>) um efeito semelhante pode ser conseguido utilizando <a href="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions">Mozilla CSS Extension</a> {{Cssxref("-moz-outline")}}.</p>
<p>Firefox <a href="http://stackoverflow.com/questions/10662902/css-outline-different-behavior-behavior-on-webkit-gecko">inclui elementos posicionados absolutamente dentro do contorno</a> ({{bug("687311")}}).</p>
|
