<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>来自clagnut的投影方法</title> <style> .img-wrapper{ background: url(img/shadow.gif) no-repeat bottom right; float: left; line-height: 0px; } .img-wrapper img{ background-color: #fff; border: 1px solid #a9a9a9; padding: 4px; position: relative; left: -5px; top: -5px; } </style> </head> <body> <div class="img-wrapper"> <img src="img/dunstan.jpg" alt="Dunstan Orchard"/> </div> </body> </html>
思想就是:采用负值的left与top值,让图片向上和向左偏移,使得投影出现.
而且一个很巧妙的地方就是,利用line-height:0;使得投影跟边框重叠在一起,所以投影不会出现在边框下面.