標籤：
備用素材：
1.png
shadow.png
第一種方式： 利用負邊距實現
最終：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>利用背景實現陰影</title></head><body> <div class="image_warpper"> <img src="1.jpg" width:200px; height:200px;/> </div></body></html>
.image_warpper{ float:left; background:url("shadow.png") no-repeat bottom right; } .image_warpper img{ background:#fff; padding:4px; margin: -4px 4px 4px -4px; vertical-align: bottom; border:1px solid #eee; }
第二種方式，不是用負的外邊距，而是使用position:relative屬性
.image_warpper{ float:left; background:url("shadow.png") no-repeat bottom right; } .image_warpper img{ background:#fff; padding:4px; position:relative; vertical-align: bottom; border:1px solid #ccc; top:-4px; left:-4px; }
效果如下：
第三種方式： CSS3 - Box-shadow
順帶回顧下其文法：
.image_warpper{ float:left; background:url("shadow.png") no-repeat bottom right; } .image_warpper img{ background-color:#fff; padding:4px; vertical-align: bottom; border:1px solid #ccc; box-shadow: 4px 4px #ccc; }
目前支援該屬性現代瀏覽器： IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支援 box-shadow 屬性。
CSS投影實現方式
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
