用CSS给图片加个阴影 不指定

jed , 2006-11-6 14:20 , 代码编程 , 评论(0) , 阅读(3542) , Via 本站原创 | |
具体的实现原理大家可以参考这篇文章
原文: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里面就正常。
原文中还讲到了给文字添加这种效果,需要的可以自己去学习,我就不多说了。
发表评论

昵称

网址

电邮

打开HTML 打开UBB 打开表情 隐藏 记住我 [登入] [注册]