08

从明天起 - 西花厅 - 博客大巴_1251468658518

说明:

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库的,请注意$号冲突的问题。如果你没使用任何库,可以忽略这条。

相关文章

One Response to “图片加阴影(CSS版)”

  1. 别了大巴 | 西花厅 Says:

    [...] 使用方法:详见 [...]

Leave a Reply