Används för att kasta skuggor från element på blocknivå (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; )- Skuggans horisontella förskjutning , positivt betyder att skuggan kommer att finnas till höger om rutan, en negativ förskjutning kommer att placera skuggan till vänster om rutan.
- Den vertikala förskjutningen av skuggan, en negativ betyder att rutan-skuggan kommer att vara ovanför rutan, en positiv betyder att skuggan kommer att vara under rutan.
- Suddighetsradien (valfritt), om den är inställd på 0 blir skuggan skarp, ju högre siffra desto suddigare blir den.
- Spridningsradien (valfritt), positiva värden ökar skuggans storlek, negativa värden minskar storleken. Standard är 0 (skuggan är lika stor som oskärpa).
- Färg
Exempel
Inre skugga
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Exempel
Internet Explorer Box Shadow
Du behöver extra element ...
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; )Endast en sida
Med en negativ spridningsradie kan du klämma in en lådskugga och bara trycka bort den från en låda.
.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; )Relaterad
- CSS3: spridningsvärde och box-shadow endast på ena sidan
- Mozilla Docs
- Flera gränser med
box-shadow.