appledesire's blog

一、特殊阴影效果：

结构：

 <div class="m_example"><div class="n_shadow"></div></div>

样式：

.m_example{position:relative;width:300px;
    height: 271px;box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);background:url(images/before.jpg) no-repeat;}
.n_shadow{
    width: 100%; height: 45%;
    position:absolute;
    z-index: -2;
    bottom: 0; right: 0;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-box-shadow: 0px 10px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 10px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 10px 2px rgba(0, 0, 0, 0.2);
}
.n_shadow:after{
    content: "";
    position:absolute;
    right: 0; bottom:0;
    width:150px; height: 100px;
    z-index: -1;
    background: rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 20px 30px 6px rgba(0, 0, 0, 0.58);
    -webkit-box-shadow: 20px 30px 6px rgba(0, 0, 0, 0.58);
    box-shadow: 20px 30px 6px rgba(0, 0, 0, 0.58);
    -moz-transform:skew(10deg,10deg) translate(-40px,-15px);
    -webkit-transform:skew(10deg,10deg) translate(-40px,-15px);
    transform:skew(10deg,10deg) translate(-40px,-15px);
}
.n_shadow:before{
    content: "";
    position:absolute;
    left: 0; bottom:0;
    width:150px; height: 100px;
    z-index: -1;
    background: rgba(0, 0, 0, 0.2);
    -moz-box-shadow: -20px 30px 6px rgba(0, 0, 0, 0.58);
    -webkit-box-shadow: -20px 30px 6px rgba(0, 0, 0, 0.58);
    box-shadow: -20px 30px 6px rgba(0, 0, 0, 0.58);
    -webkit-transform:skew(-10deg,-10deg) translate(40px,-15px);
    -moz-transform:skew(-10deg,-10deg) translate(40px,-15px);
    transform:skew(-10deg,-10deg) translate(40px,-15px);
}

效果如下：

总结：

现在的效果在编辑器里是可以显示的，但在页面中确显示不出来，至于为什么还没研究明白……

各种小技巧陆续更新中……