您现在的位置： 365建站网 > 365文章 > css\s special-阴影

css\s special-阴影

文章来源：365jz.com 点击数：215 更新时间：2009-09-16 11:47 参与评论

每个菜鸟都有一个成长的过程，而我正是其中的一只菜鸟。N天前我应某人的要求做一个带阴影效果的图，傻乎乎的我直接在ps里面加阴影，直接切图了。当时想起来还觉得挺快的嘛。今天决定不在使用那个不够标准的方法了。假如有N张图需要+阴影岂不是累死人了？呵呵，总结2种实现阴影效果的方法。
一.定位法
运用到相对定位，使用简单的错位快速制作阴影效果。这里指的错位是指内层id为in的div的相对错位，使得外层的灰色部分外露，有一种阴影的效果。但我觉得这种阴影还是有点生硬，过渡的效果不明显，可能还要优化改进，可以嵌套多几层再做多次颜色的过渡。
xhtml部分：
<div class="out">
<div class="in"><img src="test.jpg" width="853" height="1280" alt=""/></div>
</div>
css部分：

.out{
width:860px;/*比原图大点，跟错位量有点关*/
background:#ccc;/*阴影颜色*/
margin:10px auto;
}

.in{
position:relative;
top:-5px;/*向上错位5px*/
left:-5px;/*向左错位5px*/
padding:2px;
background:#fff;
border:1px solid #999;
}
二.洋葱皮方法
这个方法为何叫洋葱皮呢？呵呵，因为它的原理是一层一层的添加过渡颜色，跟第一种方法我提到的优化一样。留意过渡颜色的设置。
xhtml部分：
<div class="out">
<div class="in2">
<div class="in"><img src="test.jpg"/></div>
</div>
</div>
css部分：
.out{
float:left;
border:2px solid #ddd;/*1级过渡色*/
background:#bbb;/*2级过渡色*/
}

.in2{
position:relative;
margin:2px;
border:2px solid #999;/*3级过渡色*/
background:#777;/*4级过渡色*/
}

.in{
position:relative;
padding:2px;
border:2px solid #555;/*5级过渡色*/
background:#fff;/*6级过渡色*/
}
其实还有一种叫浮动法，这里我就不写了。一直有个问题困扰着我，我以前做阴影效果的方法除了部够标准还有什么问题不？是否还有一些我自己没意识的问题呢？

Tag标签: css's special 阴影