boxshadow-multiple-ref.html (748B)
1 <!DOCTYPE HTML> 2 <style> 3 body { 4 background-color: green; 5 } 6 7 #thediv { 8 background-color: green; 9 width: 300px; 10 height: 100px; 11 position: absolute; 12 top: 20px; 13 left: 20px; 14 z-index: 4; 15 } 16 17 #theshadow { 18 background-color: black; 19 width: 300px; 20 height: 100px; 21 position: absolute; 22 top: 29px; 23 left: 29px; 24 z-index: 1; 25 } 26 27 #theshadow2 { 28 background-color: blue; 29 width: 300px; 30 height: 100px; 31 position: absolute; 32 top: 26px; 33 left: 26px; 34 z-index: 2; 35 } 36 37 #theshadow3 { 38 background-color: red; 39 width: 300px; 40 height: 100px; 41 position: absolute; 42 top: 23px; 43 left: 23px; 44 z-index: 3; 45 } 46 </style> 47 48 <div id="theshadow"> </div><div id="theshadow2"> </div><div id="theshadow3"> </div><div id="thediv">Foo</div>