盒子里面放了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