如何使圖片陰影自動調整:shrink-wraps

首先，先來看一個簡單的例子：

測試一

HTML代碼：

1 <div style="background-color: gray;">測試一</div>

 

我們現在給上面的例子中，CSS添加float屬性，你會發現一些小小的變動，也許你認為這沒什麼，今天要講的主題就是由這個小小的變化衍生而來的；

測試二

HTML代碼：

1 <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 {}{
10  background-color: #fff;
11  border: 1px solid #a9a9a9;
12  padding: 4px;
13  display: block;
14  margin: -5px 5px 5px -5px;
15  position: relative;
16}HTML代碼：

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