Centered Object With 360° Drop Shadow

How To

CSS:

.wrap0, .wrap1, .wrap2, .wrap3 {
  display:inline-table;
  /* \*/display:block;/**/
  position:relative;
  }
.wrap0 {
  float:left;
  background:url(shadow.gif) right bottom no-repeat;
  }
.wrap1 {
  background:url(shadow180.gif) no-repeat;
  }
.wrap2 {
  background:url(corner_bl.gif) 0px 100% no-repeat;
  }
.wrap3 {
  padding:4px 6px 6px 4px;
  background:url(corner_tr.gif) 100% 0px no-repeat;
  }
#center {
	width: 1%;
	margin-left:50%;
	clear:both;}

HTML:

<div id="center">
 <div class="wrap0">
  <div class="wrap1">
   <div class="wrap2">
    <div class="wrap3">
     <img
      src="object.gif"
      alt="The object casting a shadow"
     />
    </div>
   </div>
  </div>
 </div>
</div>