上一篇CSS教程 文章：CSS高级技巧:网页布局 CSS阴影效果 (Drop Shadows) 一点阴影可以给平板的设计增加纵深的感觉, 很多时候我们都是直接用PhotoShop直接制作带阴影的图片以供使用, 这里介绍的是一种不需要修改图片, 而只需要用CSS完成的技巧. 原理: 给<img />标签增加一个容器, 给容器设置一个大的阴影背景图像, 然后把<img />利用负值外补丁进行偏移, 使阴影落在图像外侧以达到效果. 备用的阴影图像 shadow.gif HTML代码如下: <div class="image_shadow"> <img src="../images/origin_image.jpg" alt=""/></div> CSS代码如下: .image_shadow{position:relative;float:left;clear:right;background:url(../images/shadow.gif) no-repeat right bottom;}.image_shadow img{position:relative;display:block;margin:-5px 5px 5px -5px;padding:3px;background:white;border:solid 1px #ccc;} 红色代码部分是为IE 6准备的, 不然... Clagnut阴影: Richard Rutter提供了一个类似的阴影方法, 他用的是相对定位来偏移图像. CSS代码如下: .image_shadow{float:left;line-height:0;background:url(../images/shadow.gif) no-repeat right bottom;}.image_shadow img{position:relative;left:-5px;top:-5px;padding:3px;background:white;border:solid 1px #ccc;} 上面的阴影都有点生硬(hard), 我们可以通过建立一个额外的div标签, 再运用一个带透明度的png蒙板来遮盖阴影图片的边缘. 具有Alpha的阴影蒙板图片 shadow_mask.png HTML代码如下: <div class="image_shadow"> <div> <img src="../images/origin_image.jpg" alt="" /> </div></div> CSS代码如下: .image_shadow{float:left;background:url(../images/shadow.gif) no-repeat right bottom;}.image_shadow div{float:left;padding:0 5px 5px 0;background:url(../images/shadow_mask.png) no-repeat left top;}.image_shadow div img{padding:3px; background:white; border:solid 1px #ccc;} 效果如下: 蒙板效果的阴影, 更加自然 无蒙板的阴影, 边缘有点生硬 对于IE 6以下不支持png-24的透明效果, 我们要用到filter 和 hacks了 * html .images_shadow div{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/shadow_mask.png' ,sizingMethod='crop');} 另还有类似CSS Sprites的方法创建阴影, 同样可以做到自然. 但是额外标签过多, 不推荐. 到此为止CSS高级教程结束．

　　推荐阅读

　　css教程：网页中Span和Div的区别

HTML只是赋予内容的手段，大部分HTML标签都有其意义（标签p创建段落，h1标签创建标题等等）的，然而span和div标签似乎没有任何内容上的意义，听起来就像一个泡沫做成的锤子一样无用。但实际上，与CSS结合起来后，>>>详细阅读

本文标题：CSS高级技巧:阴影效果

地址：http://www.17bianji.com/kaifa2/CSS/17433.html

 1/2    1