CSS3实现曲线阴影和翘边阴影

box-shadow属性可以设置一个或多个下拉阴影的框。

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 必需的。水平阴影的位置。允许负值

v-shadow 必需的。垂直阴影的位置。允许负值

blur 可选。模糊距离

spread 可选。阴影的大小

color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表

inset 可选。从外层的阴影（开始时）改变阴影内侧阴影

html:

    <div class="wrap effect">
        <h1>shadow effect</h1>
    </div>

css:

        .wrap{
            width: 70%;
            height: 200px;
            margin: 50px auto;
            background-color: #fff;
        }
        .wrap h1{
            font-size: 40px;
            text-align: center;
            line-height: 200px;
        }
        .effect{
            position: relative;
            box-shadow: 0 1px 4px rgba(0,0,0,0.3),
            inset 0 0 40px rgba(0,0,0,0.1);
        }
        .effect::before, .effect::after{
            content: '';
            background-color: #0000ff;
            position: absolute;
            top: 50%;
            bottom: 0;
            left: 20px;
            right: 20px;
            box-shadow: 0 0 20px rgba(0,0,0,0.8);
            border-radius: 100px/10px;
            z-index: -1;
        }

预览：

接着，使用无序列表放置3个图片，看这样css3阴影效果，html：

    <ul class="pic">
        <li><img src="img/f1.jpg" alt=""></li>
        <li><img src="img/f2.jpg" alt=""></li>
        <li><img src="img/f3.jpg" alt=""></li>
    </ul>

css:

        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        ul{
            list-style: none;
        }
        .pic{
            width: 1050px;
            height: auto;
            clear: both;
            overflow: hidden;
            margin: 20px auto;
        }
        .pic li{
            width: 320px;
            height: 220px;
            float: left;
            margin: 20px 10px;
            border: 2px solid #efefef;
            background-color: #fff;
            box-shadow: 0 1px 4px rgba(0,0,0,0.27),
            inset 0 0 60px rgba(0,0,0,0.1);
            position: relative;
        }
        .pic li img{
            display: block;
            width: 310px;
            height: 210px;
            margin:5px;
        }
        .pic li::before,.pic li::after{
            content: '';
            width: 90%;
            height: 80%;
            background-color: lightgreen;
            position: absolute;
            left: 20px;
            bottom: 8px;
            z-index: -2;
            box-shadow: 0 8px 20px rgba(0,0,0,0.6);
        }
        .pic li::before{
            transform: skew(-11deg) rotate(-4deg);
        }
        .pic li::after{
            transform: skew(11deg) rotate(4deg);
        }

预览：