CSS Box Shadow - CSS-Tricks

Anonim

Usado para projetar sombras em elementos de nível de bloco (como divs).

.shadow ( -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; )
  1. O deslocamento horizontal da sombra, positivo significa que a sombra estará à direita da caixa, um deslocamento negativo colocará a sombra à esquerda da caixa.
  2. O deslocamento vertical da sombra, um negativo significa que a sombra da caixa estará acima da caixa, um positivo significa que a sombra estará abaixo da caixa.
  3. O raio do desfoque (opcional), se definido como 0, a sombra será nítida. Quanto maior o número, mais desfocado será.
  4. O raio de propagação (opcional), os valores positivos aumentam o tamanho da sombra, os valores negativos diminuem o tamanho. O padrão é 0 (a sombra tem o mesmo tamanho do desfoque).
  5. Cor

Exemplo

Sombra interior

.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )

Exemplo

Internet Explorer Box Shadow

Você precisa de elementos extras ...

 Box-shadowed element 
.shadow1 ( margin: 40px; background-color: rgb(68,68,68); /* Needed for IEs */ -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); box-shadow: 5px 5px 5px rgba(68,68,68,0.6); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; zoom: 1; ) .shadow1 .content ( position: relative; /* This protects the inner element from being blurred */ padding: 100px; background-color: #DDD; )

Apenas um lado

Usando um raio de propagação negativo, você pode obter uma sombra de caixa e empurrá-la apenas para fora de uma das bordas da caixa.

.one-edge-shadow ( -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; )

Relacionado

  • CSS3: valor de propagação e sombra de caixa em apenas um lado
  • Mozilla Docs
  • Várias fronteiras com box-shadow.