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

CSS实现图片阴影效果三部曲

2008-10-31 09:54 736 查看

CSS实现图片阴影效果三部曲 css shadow triple steps
此文译自CSS.Mastery.Advanced.Web.Standards.Solutions.Feb.2006.pdf
预览效果请直接看第三步。译文为直译，具体请参考英文版本。英文书籍也有很多“八股”，看多了就习惯了

正文开始：
第一步、如何实现图片阴影效果
为了创建这种效果，首先你设置一个阴影图片背景在外套图层标签。因为图层标签是块级元素，它们将水平伸展，并占据可以获取的所有空间。这种情形下我们可以使用这种技巧，用图层外套住图片。另外，也可以设置图层浮动，来收缩外套。（笔者用的系统是mac）

复制内容到剪贴板
代码:

.img-wrapper {
background: url(shadow.gif) no-repeat bottom right;
clear: right;
float: left;
}

为了显示带阴影效果的图片，需要设置图片负边距偏移。（阴影效果在右边和下方，所以设置整体移动5个像素）

复制内容到剪贴板
代码:

.img-wrapper img {
margin: -5px 5px 5px -5px;
}

----------------------------------------------------------------
First
To create the effect, you first need to apply your shadow graphic to the background of the
wrapper div. Because divs are block-level elements, they stretch horizontally, taking up all
the available space. In this situation we want the div to wrap around the image. You can
do this by explicitly setting a width for the wrapper div, but doing so reduces the usefulness
of this technique. Instead, you can float the div, causing it to “shrink-wrap” on modern
browsers, with one exception: IE 5.x on the Mac.
.img-wrapper { background: url(shadow.gif) no-repeat bottom right; clear: right; float: left; }
To reveal the shadow image and create the drop shadow effect (see Figure 3-13), you need
to offset the image using negative margins:
.img-wrapper img { margin: -5px 5px 5px -5px; }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>照片阴影01 hero4u</title>
<style type="text/css">

</style>
</head>
<body>
<div class="img-wrapper">
<img src="http://www.10kuai.cn/csdn/20070105/img015.jpg" alt="来先休息抽根烟" width="175" height="192" />
</div>
<hr noshade="noshade" size="1" color="red" />
<p>第一步的效果在FF，Opera下看是正常的，IE下会有空白</p>
</body>
</html>
提示：您可以先修改部分代码再运行
经过第一步已经实现了图片阴影效果，但是还不完善，接下来还是要继续修饰

第二步、逼真照片边框效果
现在给图片加上边框和内补白，就可以创建一个非常好的，以假乱真的照片边框效果
Second
You can create a good, fake photo border effect by giving the image a border and some
padding

复制内容到剪贴板
代码:

.img-wrapper img {
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
margin: -5px 5px 5px -5px;
}

PS: 1px灰色边框和4px内补白正好抵消了5个像素的边距了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>照片阴影02 hero4u</title>
<style type="text/css">

</style>
</head>
<body>
<div class="img-wrapper">
<img src="http://www.10kuai.cn/csdn/20070105/img015.jpg" alt="来先休息抽根烟" width="175" height="192" />
</div>
<hr noshade="noshade" size="1" color="red" />
<p>第二步的效果在FF，Opera下看是正常的，IE下会有空白，而且左上边框没有。</p>
</body>
</html>
提示：您可以先修改部分代码再运行
第三步、修正IE中图片显示的bug
刚才那些在标准兼容的浏览器中是显示正常的。无论怎样，我们都需要加一些简单的规则使得他在IE6显示正常。
This works for most modern, standards-compliant browsers. However, we need to add in a
couple of simple rules to get it working correctly in IE 6:

复制内容到剪贴板
代码:

.img-wrapper {
background: url(shadow.gif) no-repeat bottom right;
clear: right;
float: left;
position: relative;
}
.img-wrapper img {
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
display: block;
margin: -5px 5px 5px -5px;
position: relative;
}

PS:div设置relative 是为了使得左上两条边框正常显示,设置display:block;是为了去除图片下面的空白。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>照片阴影03 hero4u</title>
<style type="text/css">

</style>
</head>
<body>
<div class="img-wrapper">
<img src="http://www.10kuai.cn/csdn/20070105/img015.jpg" alt="来先休息抽根烟" width="175" height="192" />
</div>
<hr noshade="noshade" size="1" color="red" />
<p>第三步的效果在FF，Opera，IE下看都是正常的。至此css shadow 三部曲结束</p>
</body>
</html>
提示：您可以先修改部分代码再运行
BTW：阴影图片的选择可以是800*800大小的图片了，阴影的效果为5px就可以了。如果你想要比5px更长的可以自制一个。
在Photoshop里面新建795*795的透明，用白色填充图层1，设置样式默认的阴影修改距离为1，如果设置距离为0实际上5px的阴影只有4px了，再修改画布为800*800的，调整一下位置再保存输出。
你想建立1600*1600的图片也没关系，图片太大了反而效果看不出来了，呵呵

http://www.10kuai.cn/csdn/20070105/shadow.gif
CSS.Mastery 英文版下载 [吃完午饭后放地址]

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

标签：

相关文章推荐

新的分享

章节导航