CSS高級技能:黑影实际效果

上1篇CSS实例教程 文章内容：CSS高級技能:网页页面合理布局 CSS黑影实际效果 (Drop Shadows)
1点黑影能够给平板的设计方案提升纵深的觉得, 许多情况下大家全是立即用PhotoShop立即制做带黑影的照片以供应用, 这里详细介绍的是1种不必须改动照片, 而只必须用CSS进行的技能.
基本原理:
给<img />标识提升1个器皿, 给器皿设定1个大的黑影情况图象, 随后把<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:⑸px 5px 5px ⑸px;padding:3px;background:white;border:solid 1px #ccc;}

鲜红色编码一部分是为IE 6提前准备的, 要不然...
Clagnut黑影:
Richard Rutter出示了1个相近的黑影方式, 他用的是相对性精准定位来偏位图象.
CSS编码以下:

.image_shadow{float:left;line-height:0;background:url(../images/shadow.gif) no-repeat right bottom;}
.image_shadow img{position:relative;left:⑸px;top:⑸px;padding:3px;background:white;border:solid 1px #ccc;}

---

上面的黑影都有点生涩(hard), 大家能够根据创建1个附加的div标识, 再应用1个带全透明度的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⑵4的全透明实际效果, 大家要用到filter 和 hacks了

* html .images_shadow div{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/shadow_mask.png' ,sizingMethod='crop');}

另也有相近CSS Sprites的方式建立黑影, 一样能够保证当然. 可是附加标识过量, 不强烈推荐.
到此为止CSS高級实例教程完毕．