Käytetään varjojen (usein nimeltään "Drop Shadows", kuten Photoshopissa) heittämiseen elementeistä. Tässä on esimerkki, jolla on syvin mahdollinen selaintuki:
.shadow ( -webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */ box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ )Että:
box-shadow: (horizontal offset) (vertical offset) (blur radius) (optional spread radius) (color);- Varjon vaakasuora siirtymä (vaaditaan), positiivinen tarkoittaa, että varjo on laatikon oikealla puolella, negatiivinen siirto asettaa varjon laatikon vasemmalle puolelle.
- Varjon pystysuora siirtymä (vaaditaan), negatiivinen tarkoittaa, että laatikko-varjo on laatikon yläpuolella, positiivinen tarkoittaa, että varjo on laatikon alapuolella.
- Hämärtösäde (vaaditaan), jos se asetetaan arvoon 0, varjo on terävä, mitä suurempi luku, sitä epäselvämpi se on, ja mitä kauempana varjo ulottuu. Esimerkiksi varjo, jonka vaakasuuntainen siirtymä on 5 kuvapistettä ja jonka sumennussäde on myös 5 kuvapistettä, on koko kuvion 10 kuvapistettä.
- Hajotussäde (valinnainen), positiiviset arvot lisäävät varjon kokoa, negatiiviset arvot pienentävät kokoa. Oletus on 0 (varjo on samankokoinen kuin sumennus).
- Väri (pakollinen) - ottaa minkä tahansa väriarvon, kuten hex, nimetty, rgba tai hsla. Jos väriarvo jätetään pois, laatikon varjot piirretään etualan väreihin (teksti
color). Mutta ole tietoinen siitä, että vanhemmat WebKit-selaimet (ennen Chrome 20 ja Safari 6) ohittavat säännön, kun väri jätetään pois.
rgba(0, 0, 0, 0.4)Puoliläpinäkyvän värin, kuten kaltaisen, käyttö on yleisintä ja mukava vaikutus, koska se ei peitä kokonaan / läpinäkyvästi sitä, mitä on ohi, mutta antaa alla olevan näkyvän hieman läpi, kuten todellinen varjo.
Esimerkki
Sisäinen varjo
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Esimerkki
Internet Explorer (8 tai vanhempi) Box Shadow
Tarvitset ylimääräisen elementin, mutta se on yhteensopiva filter.
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; )Vain yksipuolinen
Negatiivisen leviämissäteen avulla voit puristaa laatikon varjoa ja työntää sen vain laatikon yhdeltä reunalta.
.one-edge-shadow ( box-shadow: 0 8px 6px -6px black; )Useita rajoja ja muuta
Voit pilkulla erottaa laatikko-varjon monta kertaa kuin haluat. Esimerkiksi tässä näkyy kaksi varjoa, joilla on eri sijainnit ja värit samassa elementissä:
box-shadow: inset 5px 5px 10px #000000, inset -5px -5px 10px blue;Esimerkki osoittaa, kuinka voit käyttää sitä useiden reunojen luomiseen:
Katso Pen Multiple box-shadow -jäähdytys! kirjoittanut Chris Coyier (@chriscoyier) CodePenissä.
Soveltamalla varjoja pseudoelementteihin, joita sitten käsittelet, saat melko hienoja 3D-näköisiä laatikkovarjoja:
Katso Halil İbrahim Nuroğlun (@haibnu) Pen CSS3 Box Shadows Effects -koodikynä.
Erittäin sileät varjot useiden pilkuilla erotettujen arvojen kautta:
Katso
Chris Coyierin (@chriscoyier) Pen smooth box-shadow CodePen
-palvelusta.
Selaimen tuki
Katso tarkemmat tiedot toimittajan etuliitteiden kattavuudesta sivun yläosasta. Tämä on yksi niistä ominaisuuksista, joissa etuliitteiden pudottaminen on tässä vaiheessa melko kohtuullista.