如何使图片阴影自动伸缩:shrink-wraps

首先，先来看一个简单的例子：

测试一

HTML代码：

 <div style="background-color: gray;">测试一</div>

 

我们现在给上面的例子中，CSS添加float属性，你会发现一些小小的变动，也许你认为这没什么，今天要讲的主题就是由这个小小的变化衍生而来的；

测试二

HTML代码：

 <div style="background-color: gray; float: left;">测试二</div>

 

 你现在可以看到：测试二中的DIV是随着你内容的增加自动伸缩的。啊，yes...把这个效果应用到背景阴影里会出现什么效果呢？

1、不用给包裹的DIV设置固定宽度了

2、能根据图片的大小自动调整

摘处：CSS Mastery

CSS代码：

 1.img-wrapper {}{
 2  background: url(images/shadow.gif) no-repeat bottom right;
 3  clear: both;
 4  float: left;
 5  position: relative;
 6  margin: 10px 0 0 10px;
 7}
 8 
 9.img-wrapper img {}{
  background-color: #fff;
  border: 1px solid #a9a9a9;
  padding: 4px;
  display: block;
  margin: -5px 5px 5px -5px;
  position: relative;
}

HTML代码：

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