A propriedade `box-shadow` anexa uma ou mais sombras ao redor do quadro de um elemento (pode estar dentro). É uma opção que lhe dá o poder de criar facilmente maravilhosos efeitos de sombra. As sombras de caixa são uma ótima maneira de elevar o visual da sua página da web.
Uma sombra de caixa pode ser descrita com várias propriedades, incluindo:
Existem dois valores `length` para definir a posição da sombra. <offset-x> especifica a distancia horizontal. Valores negativos colocam a sombra à esquerda do elemento. `offset-y` especifica a distancia vertical. Valores engativos colocam a sombra acima do elemento. Veja `length` para possíveis unidades.
This is a third `length` value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be 0 (the shadow's edge is sharp).
* #### spread-radius (default: 0)
This is a fourth <length> value. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).
* #### color
This value is used to set the color of the shadow, usually defined with hex `#000000`, rgba value `rgba(55,89,88,0.8)` or rgb value `rgb(55,89,88)`
#### Extended
To maximize compatibility, it is recommended that you declare box shadow property for `moz-appearance` and `webkit`, this extends the normal syntax to:
However, this step can be ignored if it is creating confusion, as moz property and webkit property will only work in specific applications such as Firefox, and are not on a standards track.
### Examples
#### Basic use
```
css div { largura: 200px; altura: 50 px; cor de fundo: # 333; box-shadow: 10px 10px 5px #ccc; }