一、用图片制作阴影效果
img {
background: url(img-shadow.png) no-repeat right bottom;
padding: 7px 11px 12px 7px;
}
一般来说我们比较接受光从左上角打过来,在右下角形成阴影的状态。所以我做了一张1000 x 1000像素的图片,图片的右边、下边分别有一块大概5像素的阴影部分。因为背景图片很大,所以1000像素以下的图片都可以用这张背景图来做阴影。
二、用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;
}
这两种方法都很简单,第一种图片方法可以把阴影做的更加柔和、第二种方法则更绿色、简单。