六 08
图片加阴影(CSS版)
2009-06-08 0:31
photo, share
1 Comment »
说明：
1.鉴于IE6下的PNG问题，所有没用PNG做阴影，故此方法只适用于白色为底的网页/博客。如有特别需要，可以做个通用底色的版本，但阴影没有羽化和渐淡的效果。
2.不新鲜，也简单，只是用CSS在图片上加阴影，原理网上一大片，感兴趣的朋友可以自己搜索，在此就只讲使用方法了：
方法1（纯CSS）：
优点：速度快。
缺点：需要手工修改HTML代码。适合只有少数图片.
使用方法：
步骤1：
将你的图片HTML代码改成这样的如下（就是在<IMG>标签上套一个Class名为”img_shadow”的<DIV>），
步骤2：
在CSS里面加入：
.img_shadow {
display:inline-table;
_float:left; /* hack IE6 */
#float:left; /* hack IE7 */
_position:relative; /* hack IE6 */
padding:0 3px 3px 0;
background:#fff url(http://lds2008.blogbus.com/files/12443900460.gif) right bottom;
}
.img_shadow img {
_position:relative; /* hack IE6 */
_display:block; /* hack IE6 */
border:1px solid #DDDDDD;
margin:-5px 0 0 -5px;
padding:3px;
}
方法2（CSS+JS）：
优点：无法手动修改HTML代码。
缺点：需要加载JS文件。适合区域内有大量图片.
使用方法：
步骤1：
在你的<HEAD>里面加上如下代码：
注意：
1.红色的字，请换成你需要有阴影图片的大区域CLASS名，我这里使用的是blogbus新模板官方标签的文章区域的Class名.(如果去掉红色的部分,将使页面的所有图片加上阴影.)
2.脚本中使用了jQuery,其实没需要，只是习惯了。如果你使用了其他JS库的，请注意$号冲突的问题。如果你没使用任何库，可以忽略这条。
Comments