您的位置：首页 > Web前端 > CSS

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

2007-10-10 01:20 387 查看

现在大多数人使用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;

}

[align=left]相关代码：[/align]
<!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">



</style>

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

</html>

阴影图下载地址

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航