CSS Box Shadow - CSS-Tricks

Anonim

Wird verwendet, um Schatten von Elementen auf Blockebene (wie Divs) zu werfen.

.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. Der horizontale Versatz des Schattens, positiv, bedeutet, dass sich der Schatten rechts von der Box befindet. Ein negativer Versatz platziert den Schatten links von der Box.
  2. Der vertikale Versatz des Schattens, ein negativer bedeutet, dass sich der Box-Schatten über der Box befindet, ein positiver bedeutet, dass sich der Schatten unter der Box befindet.
  3. Der Unschärferadius (optional): Wenn der Schatten auf 0 gesetzt ist, ist er scharf. Je höher die Zahl, desto unschärfer wird er.
  4. Der Ausbreitungsradius (optional), positive Werte erhöhen die Größe des Schattens, negative Werte verringern die Größe. Die Standardeinstellung ist 0 (der Schatten hat die gleiche Größe wie Unschärfe).
  5. Farbe

Beispiel

Inneren Schatten

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

Beispiel

Internet Explorer Box Shadow

Sie benötigen zusätzliche Elemente…

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

Nur einseitig

Wenn Sie einen negativen Ausbreitungsradius verwenden, können Sie einen Boxschatten zusammendrücken und ihn nur von einer Kante einer Box drücken.

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

verbunden

  • CSS3: Wert und Box-Shadow nur auf einer Seite verteilen
  • Mozilla Docs
  • Mehrere Grenzen mit box-shadow.