2.07日音讯,CSS基础知识之阴影效果

　　2.07日音讯,CSS基础知识之阴影效果。以前我们给图片或文字加阴影都是用的图片，这种方法比较笨拙，但在当时的技术情况下，也只能如此，加阴影的目的很简单，就是为了增加立体感和增加网站页面效果的纵深的感觉,随着技术的不断改进和提高我们今天就来说一下，利用css加阴影的方法，好了，进入正题：

　　备用的阴影图像shadow.gif

　　HTML代码如下:

　　CSS代码如下:

　　.image_shadow{position:relative;float:left;clear:right;background:url(../images/shadow.gif)no-repeatrightbottom;}

　　.image_shadowimg{position:relative;display:block;margin:-5px5px5px-5px;padding:3px;background:white;border:solid1px#ccc;}

　　红色代码部分是为IE6准备的,不然...

　　Clagnut阴影:

　　RichardRutter提供了一个类似的阴影方法,他用的是相对定位来偏移图像.

　　CSS代码如下:

　　.image_shadow{float:left;line-height:0;background:url(../images/shadow.gif)no-repeatrightbottom;}

　　.image_shadowimg{position:relative;left:-5px;top:-5px;padding:3px;background:white;border:solid1px#ccc;}Webjx.Com

　　上面的阴影都有点生硬(hard),我们可以通过建立一个额外的p标签,再运用一个带透明度的png蒙板来遮盖阴影图片的边缘.

　　具有Alpha的阴影蒙板图片shadow_mask.png

　　HTML代码如下:

　　CSS代码如下:

　　.image_shadow{float:left;background:url(../images/shadow.gif)no-repeatrightbottom;}

　　.image_shadowp{float:left;padding:05px5px0;background:url(../images/shadow_mask.png)no-repeatlefttop;}

　　.image_shadowpimg{padding:3px;background:white;border:solid1px#ccc;}

　　效果如下:

　　蒙板效果的阴影,更加自然

　　无蒙板的阴影,边缘有点生硬

　　对于IE6以下不支持png-24的透明效果,我们要用到filter和hacks了

　　*html.images_shadowp{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://www.hdscwl.com/xinwen/zhishi/images/shadow_mask.png',sizingMethod='crop');}