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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
|
---
title: box-shadow
slug: Web/CSS/box-shadow
tags:
- CSS
- CSS Background
- Estilos
- Reference
- Referencia
- Sombras
- box-shadow
translation_of: Web/CSS/box-shadow
---
<p>{{ CSSRef() }}</p>
<p>La propiedad CSS <code>box-shadow</code> añade efectos de sombra alrededor del marco de un elemento. Se pueden definir múltiples efectos separados por comas. La caja de la sombra se describe por los desplazamientos en X e Y, los radios de desenfoque y dispersión, y el color relativos al elemento.</p>
<p class="hidden">El código fuente de este ejemplo interactivo se encuentra almacenado en un repositorio de GitHub. Si desea contribuir al poryecto de ejemplos interactivos, por favor clone el repositiorio <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envie un pull request.</p>
<p>La propiedad <code>box-shadow</code> permite proyectar una sombra difuminada desde el marco de casi cualquier elemento. Si {{cssxref("border-radius")}} es especificado en un elemento con la propiedad box-shadow, la sombra adopta la misma curva en las esquinas. El z-orden de múltiples cajas de sombra es la misma que de múltiples <a href="https://developer.mozilla.org/en-US/CSS/text-shadow">sombras de texto</a> (la primera sombra definida se ubica hasta arriba).</p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Generador de Box-shadow</a> es una herramienta interactiva que permite generar una <code>box-shadow</code>.</p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="brush: css no-line-numbers language-css notranslate"><code class="language-css"><span class="comment token">/* Keyword values */</span>
<span class="property token">box-shadow</span><span class="punctuation token">:</span> none<span class="punctuation token">;</span>
<span class="comment token">/* offset-x | offset-y | color */</span>
<span class="property token">box-shadow</span><span class="punctuation token">:</span> <span class="number token">60</span><span class="token unit">px</span> <span class="number token">-16</span><span class="token unit">px</span> teal<span class="punctuation token">;</span>
<span class="comment token">/* offset-x | offset-y | blur-radius | color */</span>
<span class="property token">box-shadow</span><span class="punctuation token">:</span> <span class="number token">10</span><span class="token unit">px</span> <span class="number token">5</span><span class="token unit">px</span> <span class="number token">5</span><span class="token unit">px</span> black<span class="punctuation token">;</span>
<span class="comment token">/* offset-x | offset-y | blur-radius | spread-radius | color */</span>
<span class="property token">box-shadow</span><span class="punctuation token">:</span> <span class="number token">2</span><span class="token unit">px</span> <span class="number token">2</span><span class="token unit">px</span> <span class="number token">2</span><span class="token unit">px</span> <span class="number token">1</span><span class="token unit">px</span> <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0.2</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="comment token">/* inset | offset-x | offset-y | color */</span>
<span class="property token">box-shadow</span><span class="punctuation token">:</span> inset <span class="number token">5</span><span class="token unit">em</span> <span class="number token">1</span><span class="token unit">em</span> gold<span class="punctuation token">;</span>
<span class="comment token">/* Any number of shadows, separated by commas */</span>
<span class="property token">box-shadow</span><span class="punctuation token">:</span> <span class="number token">3</span><span class="token unit">px</span> <span class="number token">3</span><span class="token unit">px</span> red<span class="punctuation token">,</span> <span class="number token">-1</span><span class="token unit">em</span> <span class="number token">0</span> <span class="number token">0.4</span><span class="token unit">em</span> olive<span class="punctuation token">;</span>
<span class="comment token">/* Global keywords */</span>
<span class="property token">box-shadow</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
<span class="property token">box-shadow</span><span class="punctuation token">:</span> initial<span class="punctuation token">;</span>
<span class="property token">box-shadow</span><span class="punctuation token">:</span> unset<span class="punctuation token">;</span></code></pre>
<p>Especifica una sola box-shadow utilizando:</p>
<ul>
<li>Dos, tres, o cuatro valores <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length"><length></a></code>.
<ul>
<li>Si solo dos valores son definidos, son interpretados como valores <code><a href="https://developer.mozilla.org/es/docs/Web/CSS/box-shadow$edit#offset-x"><offset-x><offset-y></a></code>.</li>
<li>Si un tercer valor es dado, es interpretado como un <code><a href="https://developer.mozilla.org/es/docs/Web/CSS/box-shadow$edit#blur-radius"><blur-radius></a></code>.</li>
<li>Si un cuarto valor es dado, es interpretado como un <code><a href="https://developer.mozilla.org/es/docs/Web/CSS/box-shadow$edit#spread-radius"><spread-radius></a></code>.</li>
</ul>
</li>
<li>Opcionalmente, la palabra clave <code><a href="https://developer.mozilla.org/es/docs/Web/CSS/box-shadow$edit#inset">inset</a></code>.</li>
<li>Opcionalmente, el valor <code><a href="https://developer.mozilla.org/es/docs/Web/CSS/box-shadow$edit#color"><color></a></code>.</li>
</ul>
<h3 id="Valores">Valores</h3>
<dl>
<dt><code>inset</code></dt>
<dd>Si no se especifica (por defecto), la sombra asume una sombra difuminada (como si la caja fuera levantada por encima del contenido).<br>
La presencia de la palabra clave <code>inset</code> cambia la sombra a una dentro del marco (como si el contenido estuviera deprimido dentro de la caja). Inset shadows dibuja dentro del borde (incluso de los transparentes), por encima del fondo, pero por debajo del contenido.</dd>
<dt><code><offset-x> <offset-y></code></dt>
<dd>Estos son dos valores {{cssxref("<length>")}} para definir el desplazamiento de la sombra. <code><offset-x></code> especifica la distancia horizontal. Los valores negativos colocan las combra a la izquierda de el elemento. <code><offset-y></code> Especifica la distancia vertical. Los valores negativos colocan la sombra por encima del elemento. Ver{{cssxref("<length>")}} para posibles unidades.<br>
Si ambos valores son <code>0</code>, la sombra es ubicada detras del elemento (y puede generar un efecto de difuminación <code><blur-radius></code> y/o <code><spread-radius></code> está establecido).</dd>
<dt><code><blur-radius></code></dt>
<dd>Este es el tercer valor {{cssxref("<length>")}}. Cuando mayor sea este valor, mayor sera la difuminación, por consecuencia la sombra se vuelve más grande y ligera. Los valores negativos no son permitidos. Si esto no es especificado, su valor será <code>0</code> (el borde de la sombra es fuerte). La especificación no incluye un algoritmo exacto para como el radio de desenfoque debe ser calculado, sin embargo, explica lo siguiente:</dd>
</dl>
<blockquote>
<p>...para una borde largo y recto de la sombra, se debería crear una transición de color con la longitud de la distancia de desenfoque que sea perpendicular a y centrada al borde de la sombra, y en estos rangos desde el color de la sombra total en el punto final del radio dentro de la sombra hasta totalmente transparente en el punto final fuera de ella.</p>
</blockquote>
<dl>
<dt><code><spread-radius></code></dt>
<dd>Este es el cuarto valor {{cssxref("<length>")}} . Los valores positivos harán que la sombra se expanda y crezca más, los valores negativos harán que la sombra se reduzca de tamaño. Si no se especifica, este será <code>0</code> (la sombra será del mismo tamaño del elemento).</dd>
<dt><code><color></code></dt>
<dd>Ver los valores de {{cssxref("<color>")}} para las posibles palabras claves y anotaciones.<br>
Si no se especifica, el color depende del navegador - usualmente el valor de la propiedad {{ cssxref("color") }}, pero notar que en Safari, actualmente pinta una sombra transparente en este caso que sea omitido.</dd>
</dl>
<h2 id="Ejemplos">Ejemplos</h2>
<p>En nuestro ejemplo, se incluyen tres sombras: una sombra interior, una sombra difuminada normal, y una sombra de 2px que crea un efecto de borde (podría haberse usado un {{cssxref('outline')}} en lugar de una tercera sombra).</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>blockquote</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>q</span><span class="punctuation token">></span></span>You may shoot me with your words,<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">/></span></span>
You may cut me with your eyes,<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">/></span></span>
You may kill me with your hatefulness,<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">/></span></span>
But still, like air, I'll rise.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>q</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="entity token" title="—">&mdash;</span> Maya Angelou<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>blockquote</span><span class="punctuation token">></span></span></code>
</pre>
<p><em>Podrías dispararme con tus palabras,<br>
podrías cortarme con tus ojos,<br>
podrías matarme con tu odio,<br>
y aún, como el aire, levantarme.</em><br>
-Traduccion-</p>
<h3 id="CSS">CSS</h3>
<pre class="brush: css line-numbers language-css notranslate"><code class="language-css"><span class="selector token">blockquote</span> <span class="punctuation token">{</span>
<span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">20</span><span class="token unit">px</span><span class="punctuation token">;</span>
<span class="property token">box-shadow</span><span class="punctuation token">:</span>
inset <span class="number token">0</span> <span class="number token">-3</span><span class="token unit">em</span> <span class="number token">3</span><span class="token unit">em</span> <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span><span class="number token">0</span><span class="punctuation token">,</span><span class="number token">0</span><span class="punctuation token">,</span><span class="number token">0.1</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
<span class="number token">0</span> <span class="number token">0</span> <span class="number token">0</span> <span class="number token">2</span><span class="token unit">px</span> <span class="function token">rgb</span><span class="punctuation token">(</span><span class="number token">255</span><span class="punctuation token">,</span><span class="number token">255</span><span class="punctuation token">,</span><span class="number token">255</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
<span class="number token">0.3</span><span class="token unit">em</span> <span class="number token">0.3</span><span class="token unit">em</span> <span class="number token">1</span><span class="token unit">em</span> <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span><span class="number token">0</span><span class="punctuation token">,</span><span class="number token">0</span><span class="punctuation token">,</span><span class="number token">0.3</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span></code></pre>
<p>{{EmbedLiveSample('Examples1', '300', '300')}}</p>
<div id="Examples2">
<h3 id="HTML_2">HTML</h3>
<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Hello World<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre>
</div>
<h3 id="CSS_2">CSS</h3>
<pre class="brush: css line-numbers language-css notranslate"><code class="language-css"><span class="selector token">p</span> <span class="punctuation token">{</span>
<span class="property token">box-shadow</span><span class="punctuation token">:</span> <span class="number token">0</span> <span class="number token">0</span> <span class="number token">0</span> <span class="number token">2</span><span class="token unit">em</span> <span class="hexcode token">#F4AAB9</span><span class="punctuation token">,</span>
<span class="number token">0</span> <span class="number token">0</span> <span class="number token">0</span> <span class="number token">4</span><span class="token unit">em</span> <span class="hexcode token">#66CCFF</span><span class="punctuation token">;</span>
<span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">4</span><span class="token unit">em</span><span class="punctuation token">;</span>
<span class="property token">padding</span><span class="punctuation token">:</span><span class="number token">1</span><span class="token unit">em</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span></code></pre>
<p>{{EmbedLiveSample('Examples2', '300', '300')}}</p>
<p>Cuando el <code>x-offset</code>, <code>y-offset</code>, y <code>blur</code> son todos cero, la sombra sera un contorno unifrome. Las sombras son dibujadas desde el fondo hasta el frente, así que la primera sombra se encuentra encima de sombras posteriores. Cuando el <code>border-radius</code> es 0, como por defecto, las esquinas de la sombra serán, bien, esquinas. De haberse definido un <code>border-radius</code> de cualquier otro valor, las esquinas habrían sido redondeadas.</p>
<p>Se ha añadido un margen del tamaño de la sombra más ancha para asegurarse de que la sombra no se superponga a los elementos adyacentes o vaya más allá del borde de la caja de contención. Una sombra de caja no afeta a las dimensiones del <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model">modelo de caja</a>.</p>
<h2 class="cleared" id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow')}}</td>
<td>{{Spec2('CSS3 Backgrounds')}}</td>
<td>Definición inicial</td>
</tr>
</tbody>
</table>
<p>cssinfo}}</p>
<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>
<div class="hidden">La tabla de compatibilidad en esta página es generada de datos estructurados. Si desea contribuir a esta información, por favor revise <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíe sus pull request.</div>
<p>{{Compat("css.properties.box-shadow")}}</p>
<h2 id="Ver_también">Ver también</h2>
<ul>
<li>El tipo de dato {{cssxref("<color>")}}</li>
<li>Otras propiedades relacionadas al color: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("caret-color")}}, y {{cssxref("column-rule-color")}}</li>
<li>{{cssxref("text-shadow")}}</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Applying_color">Aplicando color a los elementos HTML utilizando CSS</a></li>
</ul>
|
