Gebruikt bij het werpen van schaduwen (vaak "Slagschaduwen" genoemd, zoals in Photoshop) van elementen. Hier is een voorbeeld met de diepst mogelijke browserondersteuning:
.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 */ )Dat is:
box-shadow: (horizontal offset) (vertical offset) (blur radius) (optional spread radius) (color);- De horizontale offset (vereist) van de schaduw, positief betekent dat de schaduw zich aan de rechterkant van de doos bevindt, een negatieve offset zal de schaduw aan de linkerkant van de doos plaatsen.
- De verticale offset (vereist) van de schaduw, een negatieve betekent dat de doosschaduw zich boven de doos bevindt, een positieve betekent dat de schaduw zich onder de doos bevindt.
- De vervagingsradius (vereist), indien ingesteld op 0, zal de schaduw scherp zijn, hoe hoger het getal, hoe waziger deze zal zijn en hoe verder de schaduw zich uitstrekt. Een schaduw met 5px horizontale offset die ook een vervagingsradius van 5px heeft, is bijvoorbeeld 10px van de totale schaduw.
- De spreidingsradius (optioneel), positieve waarden vergroten de grootte van de schaduw, negatieve waarden verkleinen de grootte. Standaard is 0 (de schaduw heeft dezelfde grootte als vervaging).
- Kleur (vereist) - accepteert elke kleurwaarde, zoals hex, named, rgba of hsla. Als de kleurwaarde wordt weggelaten, worden rechthoekige schaduwen in de voorgrondkleur (tekst
color) getekend . Maar let op, oudere WebKit-browsers (vóór Chrome 20 en Safari 6) negeren de regel wanneer kleur wordt weggelaten.
Het gebruik van een semi-transparante kleur zoals rgba(0, 0, 0, 0.4)is het meest gebruikelijk, en een leuk effect, omdat het niet volledig / ondoorzichtig bedekt wat het voorbij is, maar wat eronder een beetje zichtbaar is, als een echte schaduw.
Voorbeeld
Innerlijke schaduw
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Voorbeeld
Internet Explorer (8 en lager) Box Shadow
Je hebt een extra element nodig, maar het kan ermee 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; )Slechts één kant
Als je een negatieve spreidingsradius gebruikt, kun je in een doosschaduw knijpen en deze alleen van één rand van een doos duwen.
.one-edge-shadow ( box-shadow: 0 8px 6px -6px black; )Meerdere grenzen en meer
U kunt box-shadow zo vaak als u wilt door komma's scheiden. Dit toont bijvoorbeeld twee schaduwen met verschillende posities en verschillende kleuren op hetzelfde element:
box-shadow: inset 5px 5px 10px #000000, inset -5px -5px 10px blue;Het voorbeeld laat zien hoe u dat kunt gebruiken om meerdere randen te maken:
Zie de Pen Multiple box-shadow coolness! door Chris Coyier (@chriscoyier) op CodePen.
Door de schaduwen toe te passen op pseudo-elementen die u vervolgens manipuleert, kunt u een aantal mooie 3D-uitziende doosschaduwen krijgen:
Zie de Pen CSS3 Box Shadows Effects van Halil İbrahim Nuroğlu (@haibnu) op CodePen.
Supergladde schaduwen via meerdere door komma's gescheiden waarden:
Zie de Pen
smooth box-shadow van Chris Coyier (@chriscoyier)
op CodePen.
Browser-ondersteuning
Zie het fragment bovenaan de pagina voor details over de dekking van leveranciersprefixen. Dit is een van die eigenschappen waarbij het verwijderen van de voorvoegsels op dit moment redelijk redelijk is.