六 08

说明:
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库的,请注意$号冲突的问题。如果你没使用任何库,可以忽略这条。
八月 28th, 2009 at 23:09
[...] 使用方法:详见 [...]