CSS高级技巧:阴影效果

上一篇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;}

效果如下:

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!