曲面阴影

讲了几次js的东西，换换口味了，讲讲css的东西吧，其实css写好了是非常有意思的，一些css的特效看起来非常炫酷，且流畅度要比js好得多。

一件好的作品，不仅要好用，还要带给用户视觉上以美的享受，许多东西把细微的东西做得好一些，能有非常棒的体验。

说是曲面阴影，其实应该还要加上翘边阴影的，这两个实现方法其实都差不多，都是用css的伪元素来实现的，说到:after和:before，其实css3中许多东西的动画都用到了这两兄弟，应用挺广泛的。

曲面阴影

曲面阴影的原理是将:after和:before定位到主体的一侧，且其z-index为负数，也就是在主体的下方，让后给其添加box-shadow属性即可，不过注意的是:after和:before的宽度一定要小于主体，主要是其两侧的box-shadow不要显示出来就行了，这样主体就只有一侧有阴影显示出来，造成了这一边是曲面的视觉差，看起来颇有立体感。

.box:after,.box:before{
    content: '';
    position: absolute;
    bottom: 0px;
    top: 50%;
    left: 20px;
    right: 20px;
    background: red;
    border-radius: 100px/10px;
    box-shadow: 0 0px 30px rgba(0,0,0,0.8);
    z-index: -10;
    transition: all 1s; 
}

翘边阴影

翘边阴影主要是将主体的四个边加上阴影，让主体看起来四边都是翘起来的一样，我们先将:after和:before的高度和宽度设置为主体的90%左右（根据具体情况细微调整），然后将其用css3的transform: skew 将其倾斜，rotate将其选择，其实就是把它变成平行四边形然后旋转角度，让主体完全覆盖住这个四边形就行了。

.imgbox:after,.imgbox:before{
    content:'';
    position:absolute;
        z-index:-1; 
    background:transparent;
    width:88%;
    height:90%;
    right:20px;
    bottom:15px;
        transition: all 1s;
}
.imgbox:after{
    transform:skew(-12deg) rotate(-5deg); 
    box-shadow:20px 20px 20px rgba(0,0,0,0.8);
}
.imgbox:before{
    transform:skew(12deg) rotate(5deg); 
    box-shadow:-20px 20px 20px rgba(0,0,0,0.8);
}

效果展示：

本文示例：链接

本文代码地址：链接