图片阴影效果实现

图片或边框的阴影效果在web app中经常会意见，以下是归纳的几种简单的实现方法

实现一：

<style type="text/css">
<!--
/* easy drop shadow
================================== */
.img-wrapper {
  background: url(images/shadow.gif) no-repeat bottom right;
  float:left;
  line-height:0;

}
 
.img-wrapper img {
  background:#fff;
  padding:4px;
  border:1px solid #a9a9a9;
  position:relative;
  left:-5px;
  top:-5px;
}
-->
</style>

<div class="img-wrapper">
    <img src="images/dunstan.jpg" width="300" height="300" alt="Dunstan Orchard" />
</div>

 实现二：

<style type="text/css">
<!--

/* easy drop shadow
================================== */

.img-wrapper {
  background: url(images/shadow.gif) no-repeat bottom right;
  clear: right;
  float: left;
  position: relative;
  margin: 10px 0 0 10px;
}
 
.img-wrapper img {
  /*background-color: #fff;
  border: 1px solid #a9a9a9;
  padding: 4px;*/
  display: block;
  margin: -5px 5px 5px -5px;
  position: relative;
}
-->
</style>
<div class="img-wrapper">
     <img src="images/dunstan.jpg" width="300" height="300" alt="Dunstan Orchard" />
</div>

 实现三：

<style type="text/css">
<!--

/* easy drop shadow */

.img-wrapper {
  background: url(images/shadow.gif) no-repeat right bottom;
  float: left;
	/*margin: 10px 0 0 10px;*/
}

.img-wrapper div {
  background: url(images/mask.png) no-repeat left top !important;
  background: url(images/mask.gif) no-repeat left top;
  padding: 0 5px 5px 0;
	float: left; /* :KLUDGE: Fixes bug in IE/Mac */
}
 
.img-wrapper img {
  background-color: #fff;
  border: 1px solid #a9a9a9;
	padding: 4px;
}
-->
</style>
<div class="img-wrapper">
  <div>
    <img src="images/dunstan.jpg" width="300" height="300" alt="Dunstan Orchard" />
  </div>
</div>

 实现四：

<style type="text/css">
<!--

/* easy drop shadow
================================== */

.img-wrapper {
 background:url(images/shadow.gif) no-repeat right bottom;
 float: left;
}

.img-outer {
  background:url(images/bottom-left2.gif) no-repeat left bottom;
  float: left; /* :KLUDGE: Fixes problem in IE5.2/Mac */
}

.img-inner {
  background:url(images/top-right2.gif) no-repeat top right;
  padding: 0 5px 5px 0;
  float: left; /* :KLUDGE: Fixes problem in IE5.2/Mac */
}

.img-wrapper img {
  background-color: #fff;
  border: 1px solid #a9a9a9;
  padding: 4px;
  display: block;
}

-->
</style>

<div class="img-wrapper">
   <div class="img-outer">
      <div class="img-inner">
        <img src="images/dunstan.jpg" width="300" height="300" alt="Dunstan Orchard" />
      </div>
    </div>
</div>