CSS实现图片阴影效果三部曲(译文)

日期：2007年9月27日作者：查看:[大字体中字体小字体]

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

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

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

为了显示带阴影效果的图片，需要设置图片负边距偏移。（阴影效果在右边和下方，所以设置整体移动5个像素）
[code].img-wrapper img {
margin: -5px 5px 5px -5px;
}
[/code]

—————————————————————-
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;
}
[html]

第一步的效果在FF，Opera下看是正常的，IE下会有空白
[1] [2] [3] 下一页
CSS实现图片阴影效果三部曲(译文) 相关文章：
·动态加载外部css或js文件
·用CSS让文字居于div的底部
·减少内部人员的安全风险
·把SQL数据库部署到远程主机环境
·DNS服务器安全部署的七大问题
·一条命令看见所有卷标全部详情
·Lava-Lava 精彩部落秘密无限
·新网站如何获得外部优质网站的链接
·掌握部署 Access项目的方法
·Flash AS 制作用鼠标可以观看图片各个部分的效果
CSS实现图片阴影效果三部曲(译文) 相关软件
·上海知青部落
·《冰封王座》地图：悠林门-天龙八部 2.0 BETA19b
·特种部队10013-10015的补丁包
·《西部牛仔》模拟器
·《特种部队》客户端
·《天龙八部：霸气》公测客户端
·《天龙八部》手动补丁 0.21.0620-0.21.0711
·走近食人部落
·《部落动乱》试玩另类卡通风格
·《3D德军总部》游戏模拟器

上一篇:Photoshop调制色调淡雅惨白MM照片效果

下一篇:国外译文：网页设计如何使用CSS的选择器模式？

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

CSS实现图片阴影效果三部曲(译文)

精品推荐

热点TOP10

特别推荐