盒子里面放了img標簽，盒子浮動后，盒子的背景圖片（就是陰影圖片）會應用圖片的寬高。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* 核心技術就是float:left ,clear:right, 盒子脫離文擋流后，背景圖片會應用盒子的高度*/ .shadow{ border: 1px solid red; background: url('img/shadow.gif') no-repeat bottom right; /* margin: 5px; */ float: left; clear: right; } .shadow img{ display: block; width: 300px; height: 300px; /* 向左上角偏移5px */ /* margin: -5px 5px 5px -5px; */ /* 或者使用相對定位 */ position: relative; top: -5px; left: -5px; /* border: 1px solid red; padding: 4px; */ } </style> </head> <body> <div class="shadow"> <img src="img/dunstan.jpg"> </div> </body> </html>
為了顯示效果明顯，我給背景圖案加了邊框，只要圖片大小不超過背景圖片都能實現陰影邊框，演示地址：http://down.yesyes.wang/book/04/shadow.html