為圖片添加陰影可以是圖片看起來精緻很多。在圖片處理軟體中，為圖片添加陰影製作效果是非常容易實現的功能，然而如果為每張圖片都要去用軟體處理，顯然是很麻 煩的，而且如果有一天要去掉浮水印，又要重新處理圖片。下面介紹在不改變圖片本身的情況下，通過CSS來實現陰影製作效果。本方法是墨西哥設計師Sergio Villarreal 2004 年發明的。
常規方法，程式碼範例如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Head Line</title><style type="text/css">.shadow {float:left;background: url(images/bottom-right.gif) no-repeat bottom right;}.shadow div {background: url(images/top-left.png) no-repeat;padding: 0 4px 4px 0;}.shadow img {border: 1px solid #000;}</style><!--[if gte ie 5.5000]><style type="text/css">.shadow div {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/top-left.png",sizingMethod='crop');width:1px;background:none;}</style><![endif]--></head><body><div class="shadow"><div><img src="cup.gif"/></div></div></body></html>
素材下載：http://files.cnblogs.com/likebeta/201205292522859.zip
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
