files/es/web/css/outline-offset/index.html


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

---
title: outline-offset
slug: Web/CSS/outline-offset
tags:
  - Contorno CSS
  - Propiedad CSS
translation_of: Web/CSS/outline-offset
---
<div>{{CSSRef}}</div>

<h2 id="Resumen">Resumen</h2>

<p>La propiedad CSS <strong><code>outline-offset</code></strong> es usada para establecer el espacio entre un contorno {{ cssxref("outline") }} y el límite o borde de un elemento. Un contorno es una línea que se dibuja al rededor de los elementos, fuera de los límites de su borde.</p>

<p>{{cssinfo}}</p>

<p>El espacio será transparente (el elemento padre determinará el fondo).</p>

<h2 id="Syntax" name="Syntax">Sintaxis</h2>

<pre class="brush:css">/* Valores &lt;length&gt; */
outline-offset: 3px;
outline-offset: 0.2em;

/* Valores globales */
outline-offset: inherit;
outline-offset: initial;
outline-offset: unset;
</pre>

<h3 id="Valores">Valores</h3>

<dl>
 <dt><code>&lt;length&gt;</code></dt>
 <dd>La anchura del espacio. Ver {{cssxref("&lt;length&gt;")}} para unidades posibles. Valores negativos colocan el borde dentro del elemento.</dd>
</dl>

<h3 id="Sintaxis_formal">Sintaxis formal</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Ejemplos">Ejemplos</h2>

<pre class="brush: css">p {
  outline: dashed thin;
  /* Mueve el contorno 10px lejos del borde */
  outline-offset: 10px;
  border:1px solid black;
}
</pre>

<p>Html</p>

<pre class="brush: html">&lt;p&gt;outline: offset 10px. Border is solid and outline is dashed&lt;/p&gt;</pre>

<p>El código anterior producirá este efecto:</p>

<p>{{ EmbedLiveSample('Examples', '', '', '') }}</p>

<p>Otro ejemplo:</p>

<p><span style="outline-offset: 1px; outline: green solid 3px;"><span style="outline-offset: 1px; outline: blue solid 3px;">outline: multiple offsets;</span></span></p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentarios</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'outline-offset') }}</td>
   <td>{{ Spec2('CSS3 Transitions') }}</td>
   <td>Define <code>outline-offset</code> como propiedad que se puede animar.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Basic UI', '#outline-offset', 'outline-offset') }}</td>
   <td>{{ Spec2('CSS3 Basic UI') }}</td>
   <td>Definición inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad de navegadores</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.8")}}</td>
   <td>{{ CompatNo() }}</td>
   <td>9.5</td>
   <td>1.2</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>