CSS Box Shadow - CSS-triks

Anonim

Brukes til å kaste skygger av elementer på blokknivå (som 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. Den horisontale forskyvningen av skyggen, positiv betyr at skyggen vil være til høyre for boksen, en negativ forskyvning vil sette skyggen til venstre for boksen.
  2. Den vertikale forskyvningen av skyggen, negativ betyr at bokseskyggen vil være over boksen, en positiv betyr at skyggen vil være under boksen.
  3. Uskarphetsradiusen (valgfritt), hvis den er satt til 0, blir skyggen skarp, jo høyere tallet er, desto uskarper blir det.
  4. Spredningsradiusen (valgfritt), positive verdier øker størrelsen på skyggen, negative verdier reduserer størrelsen. Standard er 0 (skyggen har samme størrelse som uskarphet).
  5. Farge

Eksempel

Indre skygge

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

Eksempel

Internet Explorer Box Shadow

Du trenger ekstra elementer ...

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

Kun på én side

Ved å bruke en negativ spredningsradius kan du klemme inn en bokseskygge og bare skyve den av den ene kanten av en boks.

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

I slekt

  • CSS3: spred verdi og bokseskygge bare på den ene siden
  • Mozilla Docs
  • Flere grenser med box-shadow.