CSS给图片加阴影的两种方法

给图片添加阴影可以让图片显示的更加柔和、美观，如果用PhotoShop给每张图片人工添加阴影会很麻烦，而且如果以后网站变更风格可能会造成图片阴影样式和新的网站风格格格不入、很难看。所以用一些小技巧来自动模拟阴影就显得很实用很方便了。

大牛们可以用JS来制作自适应图片大小的图片边框+阴影。但我更偏爱用CSS样式来模拟。以下是两种用CSS给图片添加阴影的方法：

一、用图片制作阴影效果

点击进入演示地址

img {
	background: url(img-shadow.png) no-repeat right bottom;
	padding: 7px 11px 12px 7px;
}

一般来说我们比较接受光从左上角打过来，在右下角形成阴影的状态。所以我做了一张1000 x 1000像素的图片，图片的右边、下边分别有一块大概5像素的阴影部分。因为背景图片很大，所以1000像素以下的图片都可以用这张背景图来做阴影。

我们给网页里的图片加上上述CSS样式，作用是让我们制作的背景图的右下角和网页内插入图片的右下角对齐。这时候，网页图片是把背景图片盖住的，因而背景图片不可见，然后设置的padding值得意思是在让网页图片的四个边缘从和背景图片对齐的位置向内偏移7~12像素不等的距离，这样图片下面的阴影背景图片就会被显示出来了。从而完成了阴影的显示。

转载请注明本文地址：http://www.dimlau.com/blog/2009/01/css-drop-shadow.html

二、用CSS边框模拟阴影效果

点击进入演示地址

上面说过了，我们模拟的是光从左上角打过来时图片在右下角的投影。我们可以想象一下，光从左上角打过来，图片的左边缘和上边缘都会因为光照而变得颜色很浅，而右边缘和下边缘则会颜色加深。根据这个理论，我们只要给图片的四个边缘分别加上相应颜色、宽度的边框就可以简单模拟阴影了。CSS如下：

img {
	background: #f8f8f8;
	border-top:1px solid #ccc;
	border-right:1px solid #666;
	border-bottom:2px solid #999;
	border-left:1px solid #ccc;
	padding: 7px;
}

当我们设置的几条不同颜色的线骗过了别人的眼睛，让人以为那是阴影……是不是很有成就感？

这两种方法都很简单，第一种图片方法可以把阴影做的更加柔和、第二种方法则更绿色、简单。大家各取所需吧。

点击进入演示地址

fin.