Manual de referência CSS

CSS @regras (RULES)

大全 de Atributos CSS

CSS3 box-Atributo sizing Atributo bottom do CSS

CSS3 box-shadow attribute usage and examples

box-The shadow CSS property applies one or more shadow effects to the box of an element.

The following table provides usage instructions and version history of this attribute, as well as the syntax of its use in JavaScript scripts.

default value:	none
applies to:	all elements. It also applies to::first-letter。
inherit:	none
animatable:	is.view animation properties。
version:	CSS3new feature
JavaScript syntax:	object.style.boxShadow="8px 8px 6px #000000"

box-shadow usage syntax

The syntax of this attribute is as follows:

box-shadow: [ , , ... shadowN] | none | initial | inherit
　　　　　　　where shadow is: [ inset [ offset-x offset-y blur-radius spread-radius color ] ]

Os seguintes exemplos mostram como usar box-Propriedade shadow.

Exemplo

.shadow{
　　　　width:　150px;
　　　　height:　150px;
　　　　background:　#ccc;
　　　　border:　1px　solid　#999;
　　　　box-shadow:　2px　2px　4px　2px　#999;
}

Teste e veja‹/›

Você pode usar a palavra-chave inset para aplicar a sombra dentro da caixa do elemento. A sombra embutida é desenhada dentro da borda, acima do fundo, mas abaixo do conteúdo do elemento.

Exemplo

.shadow-inside{
　　　　width:　150px;
　　　　height:　150px;
　　　　background:　#ccc;
　　　　border:　1px　solid　#999;
　　　　box-shadow:　inset　0　0　6px　2px　#999;
}

Teste e veja‹/›

Valores da propriedade

A tabela a seguir descreve os valores dessa propriedade.

Valor	Descrição
Necessário -É necessário especificar os seguintes valores para que a propriedade seja válida.
offset-x	O primeiro comprimento especifica a distância horizontal da sombra. Um valor positivo desenha a sombra para a direita do caixa, enquanto um valor negativo desenha a sombra para a esquerda do caixa.
offset-y	O segundo comprimento especifica a distância vertical da sombra. Um valor positivo desloca a sombra para baixo, enquanto um valor negativo desloca a sombra acima do elemento.
Opcional -Os seguintes valores são opcionais.
blur-radius	O terceiro comprimento é a distância de desfoque. Quanto maior o valor, maior o desfoque, portanto, a sombra fica maior e mais clara. O valor padrão é 0, a sombra é muito nítida. Não é permitido usar valores negativos.
spread-radius	O quarto comprimento é a distância de expansão. Um valor positivo fará a forma da sombra expandir em todas as direções pelo raio especificado. Um valor negativo fará a forma da sombra encolher.
color	A cor é a cor da sombra. O valor pode ser qualquer um dos suportadosvalor de cor。Se não for especificado, geralmente écolordo valor da propriedade.
inset	Se existir, mudará a sombra projetada do exterior para o interior. A sombra embutida é desenhada dentro da borda, acima do fundo, mas abaixo do conteúdo do elemento.
none	A sombra não será exibida. Este é o valor padrão.
initial	Defina essa propriedade como seu valor padrão.
inherit	Se especificado, o elemento relacionado adota o box do elemento pai-Valores da propriedade shadow.

Compatibilidade do navegador

box-Compatibilidade do navegador para a propriedade shadow, os números na tabela a seguir representam a versão mínima do navegador que suporta essa propriedade; todos os navegadores populares suportam essa propriedade.

	Firefox 3.5+ ^-moz-，4 + Google Chrome 4+ ^-webkit-，10+ Internet Explorer 9+ Apple Safari 3.1+ ^-webkit-，5.1 + Opera 10.5+