css漂亮盒子阴影,cssSandpaper CSS3盒阴影 >> 张鑫旭-鑫空间-鑫生活

展示

-sand-box-shadow: 15px 15px #ffcccc;

此对象会有模糊圆角效果，在IE下则没有！

-sand-box-shadow: -5px -5px 5px black;

-sand-box-shadow: 15px 5px green;

代码

CSS代码：

#o1 {

position: absolute;

top: 25px;

left: 25px;

border: solid 1px black;

position: absolute;

width: 400px;

height: 100px;

padding: 10px;

-sand-box-shadow: 15px 15px #ffcccc;

background-color: #ffffcc;

}

#o2 {

position: absolute;

top: 10em;

left: 33em;

background-color: red;

width: 200px;

height: 302px;

padding: 20px;

-sand-box-shadow: -5px -5px 5px black;

background-image: gradient(linear, center top, center bottom, from(#ffffff),

to(#ccccff));

}

.relative {

position: relative;

top: 100px;

left: 100px;

}

#o3 {

position: absolute;

top: 300px;

left: 122px;

background-color: blue;

color: white;

font-weight: bold;

-sand-box-shadow: 15px 5px green;

width: 200px;

height: 200px;

position: relative;

left: 400px;

padding: 10px;

}

HTML代码：

-sand-box-shadow: 15px 15px #ffcccc;

此对象会有模糊圆角效果，在IE下则没有！

-sand-box-shadow: -5px -5px 5px black;

-sand-box-shadow: 15px 5px green;

JS代码：