具体的实现原理大家可以参考这篇文章
原文:http://www.alistapart.com/articles/cssdropshadows
中文翻译:http://www.onestab.net/a/ala/cssdropshadows.html
如果不想了解那么透彻的话,或者看了不太明白的,可以把下面的类加入到你的CSS中
只是发日志的时候有点麻烦,需要把你要加阴影的图片插入到< div class="img-shadow">< div>< /div>< /div>中,只插入到< div class="img-shadow">< /div>中就只有白边没有阴影了。
另外,因为IE不支持透明的PNG图片,所以你要把阴影图片和背景设为同一色才能看到好的效果。(可以看下面的演示图片)
.img-shadow {
float:left;
background: url(images/shadowAlpha.png) no-repeat bottom right !important;
background: url(images/shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
.img-shadow div, .sh-left div, .sh-right div {
background: url(images/shadowAlpha.png) no-repeat left top !important;
background: url(images/shadow.gif) no-repeat left top;
float: left;
padding: 0px 5px 5px 0px;
}
.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
}
可以到首页在Change Look里面把style换成Blue,再来看那个有阴影的图片就不好看,但是在Firefox里面就正常。
原文中还讲到了给文字添加这种效果,需要的可以自己去学习,我就不多说了。
原文:http://www.alistapart.com/articles/cssdropshadows
中文翻译:http://www.onestab.net/a/ala/cssdropshadows.html
如果不想了解那么透彻的话,或者看了不太明白的,可以把下面的类加入到你的CSS中
只是发日志的时候有点麻烦,需要把你要加阴影的图片插入到< div class="img-shadow">< div>< /div>< /div>中,只插入到< div class="img-shadow">< /div>中就只有白边没有阴影了。
另外,因为IE不支持透明的PNG图片,所以你要把阴影图片和背景设为同一色才能看到好的效果。(可以看下面的演示图片)
.img-shadow {
float:left;
background: url(images/shadowAlpha.png) no-repeat bottom right !important;
background: url(images/shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
.img-shadow div, .sh-left div, .sh-right div {
background: url(images/shadowAlpha.png) no-repeat left top !important;
background: url(images/shadow.gif) no-repeat left top;
float: left;
padding: 0px 5px 5px 0px;
}
.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
}
可以到首页在Change Look里面把style换成Blue,再来看那个有阴影的图片就不好看,但是在Firefox里面就正常。
原文中还讲到了给文字添加这种效果,需要的可以自己去学习,我就不多说了。