CSS基础应用学习系列(3)——图像的CSS阴影效果

最新推荐文章于 2025-09-07 12:15:11 发布

weixin_33910759

最新推荐文章于 2025-09-07 12:15:11 发布

阅读量89

点赞数

文章标签： xhtml

本文介绍了一种使用CSS而非图像处理软件来为图片添加阴影的方法。通过将阴影图像作为背景应用到包含图片的div，并通过负值偏移实现阴影效果。文章还提供了具体的CSS样式和HTML代码示例。

现在大多数人使用PS直接给图像添加阴影，但是，可以使用CSS产生简单的阴影效果，而不需要修改低层的图像。

它的工作原理是，将一个大的阴影图像应用于容器div的背景，然后使用负值的空白扁偏移这个图像，从而显示出阴影。

首先需要创建阴影图像，我用PS创建阴影图像，如下所示：
这种技术的标记非常简单：
<div class="img-wrapper"><img src="images/face.PNG" width="378" height="478" alt="I'm Leepy!!" /></div>
(注意：一定要将这些代码放在一行上，而且在div和图像之间不能有空格，IE5.5有一个空格bug,如果代码在不同的行上，那么这个bug会在图像和阴影之间造成间隙。)

为了产生阴影效果，首先需要将阴影图像应用于容器div的背景，因为div是块级元素，所以它们会水平伸展，占据所有可用空间，在这种情况下，希望div包围图像，可以显式地设置容器div的宽度，但是这么做会限制这种技术的灵活性。可以对div进行浮动，让它在现代浏览器上产生“收缩包围”的效果。
.img-wrapper {
       background: url(images/shadow.gif) no-repeat bottom right;
       float:left;
       line-height:0;
}
为了露出阴影图像并产生阴影效果，需要使用负值的偏移这个图像：
.img-wrapper img {
       left:-5px;
       top:-5px;
}
还可以给图像加上边框和一些填充，从而产生类似照片边框的效果
.img-wrapper img {
       background:#fff;
       padding:4px;
       border:1px solid #a9a9a9;
       position:relative;
       left:-5px;
       top:-5px;
}

相关代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS</title>
<style type="text/css">
<!--

.img-wrapper {
       background: url(images/shadow.gif) no-repeat bottom right;
       float:left;
       line-height:0;

}

.img-wrapper img {
       background:#fff;
       padding:4px;
       border:1px solid #a9a9a9;
       position:relative;
       left:-5px;
       top:-5px;
}
-->
</style>
</head>

<body>

<div class="img-wrapper"><img src="images/face.PNG" width="378" height="478" alt="I'm Leepy!!" /></div>

</body>
</html>

阴影图下载地址