boxshadow-multiple-ref.html 748 B

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