在网页设计中，为图片添加上阴影是一种非常不错的美化方法，经常会在设计当中用到。不用Photoshop，仅仅只用CSS如何为图片添加上阴影呢？这里有一种非常简单的方法。
如何实现这样的效果呢？其实很简单，下面是全部的代码：
<html>
<head>
<style type=”text/css”>
img{
border-top:1px solid #dcd7c8;
border-left:1px solid #dcd7c8;
border-right:1px solid #dcd7c8;
padding:5px 5px 9px 5px;
background:url(shad_bottom.png) repeat-x bottom left;
}
</style>
</head>
<body>
<img src=”flower.jpg” alt=”flower” />
</body>
</html>
img标签的三个border属性分别是为图片的上面、左边、右边添加三个边框，边框的颜色要选择和真实的阴影相接近的颜色，看上去就像是真实的阴 影一样。padding属性在图片的周围留出了一些空间，图片的下部留出了9px的空间以便于之后背景图片的添加，因为下部的阴影效果实际上是一个4px 的图片在水平平铺的结果，所以要留出9px的空间，这样减去背景图片4px的空间，整个图片的四周空间看起来就一样了。将底部的背景图片放大实际上是这样 的：
当然，这种方法做出来的阴影只是简单的阴影效果，并没有阴影渐变效果，但对于我们一般的网页设计来说也就够用了。这里还有一个更复杂一些的如何用CSS给图片添加阴影的英文文章，如果你想做出更复杂的阴影效果，可以参考一下。
时间： 2024-08-02 12:30:14