Ombre de boîte CSS - Astuces CSS

Anonim

Utilisé pour projeter des ombres sur des éléments de niveau bloc (comme les 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. Le décalage horizontal de l'ombre, positif signifie que l'ombre sera à droite de la boîte, un décalage négatif placera l'ombre à gauche de la boîte.
  2. Le décalage vertical de l'ombre, un négatif signifie que l'ombre de la boîte sera au-dessus de la boîte, un positif signifie que l'ombre sera en dessous de la boîte.
  3. Le rayon de flou (facultatif), s'il est défini sur 0, l'ombre sera nette, plus le nombre est élevé, plus il sera flou.
  4. Le rayon de propagation (facultatif), les valeurs positives augmentent la taille de l'ombre, les valeurs négatives diminuent la taille. La valeur par défaut est 0 (l'ombre a la même taille que le flou).
  5. Couleur

Exemple

Ombre intérieure

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

Exemple

Ombre de la boîte d'Internet Explorer

Vous avez besoin d'éléments supplémentaires…

 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; )

Un côté seulement

En utilisant un rayon de propagation négatif, vous pouvez obtenir une compression dans une ombre de boîte et ne la pousser que sur un bord d'une boîte.

.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; )

En rapport

  • CSS3: étaler la valeur et la boîte-ombre d'un seul côté
  • Documents Mozilla
  • Plusieurs frontières avec box-shadow.