CSS Box Shadow - CSS-Tricks

Anonim

Folosit pentru a arunca umbre de pe elemente la nivel de bloc (cum ar fi 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. Decalajul orizontal al umbrei, pozitiv înseamnă că umbra va fi în dreapta casetei, un decalaj negativ va pune umbra în stânga casetei.
  2. Decalajul vertical al umbrei, unul negativ înseamnă că umbra-cutie va fi deasupra casetei, una pozitivă înseamnă că umbra va fi sub casetă.
  3. Raza de estompare (opțional), dacă este setată la 0, umbra va fi ascuțită, cu cât este mai mare numărul, cu atât va fi mai neclară.
  4. Raza de răspândire (opțional), valorile pozitive cresc dimensiunea umbrei, valorile negative scad dimensiunea. Valoarea implicită este 0 (umbra are aceeași dimensiune ca neclaritatea).
  5. Culoare

Exemplu

Umbra interioara

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

Exemplu

Internet Explorer Box Shadow

Ai nevoie de elemente suplimentare ...

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

Numai pe o parte

Folosind o rază de răspândire negativă, puteți obține stoarce într-o umbră de cutie și împingeți-o doar de pe o margine a unei cutii.

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

Legate de

  • CSS3: răspândirea valorii și caseta-umbră pe o singură parte
  • Documente Mozilla
  • Borduri multiple cu box-shadow.