Vesszővel elválasztva több árnyék jellemzői is megadhatók.
Példa:
Forráskód
<style>
div {border:1px solid green;
background-color: green;
color:#ffffff;
width:150px; height:100px;
padding: 5px;
border-radius: 20px;
text-align:center; }
#id_0 {box-shadow: -3px -3px 15px 10px #880000,
5px 5px 15px 10px #008800;}
#id_1 {box-shadow: -5px -5px 0px 0px #444444,
-5px -5px 15px 0px #444444 inset;}
#id_2 {box-shadow: 0px 0px 5px 5px #444444,
0px 0px 15px 5px #444444 inset;}
#id_3 {box-shadow: 3px 3px 1px 0px #880000,
8px 8px 3px 0px #888800, 12px 12px 15px 0px #000088;}
#id_4 {box-shadow: 3px 3px 12px 0px #880000 inset,
8px 8px 3px 0px #888800, 12px 12px 15px 0px #000088;}
</style>
...
<body>
<div id="id_0">-3px -3px 15px 10px #880000,
5px 5px 15px 10px #008800</div>
<div id="id_1">-5px -5px 0px 0px #444444,
-5px -5px 15px 0px #444444 inset;</div>
<div id="id_2">0px 0px 5px 5px #444444,
0px 0px 15px 5px #444444 inset</div>
<div id="id_3">3px 3px 1px 0px #880000,
8px 8px 3px 0px #888800, 12px 12px 15px 0px #000088</div>
<div id="id_4">3px 3px 12px 0px #880000 inset,
8px 8px 3px 0px #888800, 12px 12px 15px 0px #000088</div>
</body>
Eredmény*
* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_szegely_arnyek_2.html