css3阴影效果设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin:0;
        padding:0;
    }
    .wrapper{
        width:70%;
        height:200px;
        margin:50px auto;
        text-align:center;
        line-height:200px;
        background-color:#fff;
    }
    .wrapper h2{
        font-size:30px;
    }
    .effect{
        box-shadow:0 0 4px rgba(0,0,0,0.3),0 0 10px rgba(0,0,0,0.1) inset;
        -webkit-box-shadow:0 0 4px rgba(0,0,0,0.3),0 0 10px rgba(0,0,0,0.1) inset;
        -moz-box-shadow:0 0 4px rgba(0,0,0,0.3),0 0 10px rgba(0,0,0,0.1) inset;
        -o-box-shadow:0 0 4px rgba(0,0,0,0.3),0 0 10px rgba(0,0,0,0.1) inset;
        position:relative;
    }
    .effect:after,.effect:before{
        content:'';
        position:absolute;
        background-color:red;
        top:50%;
        bottom:0;
        left:10px;
        right:10px;
        box-shadow:0 0 20px rgba(0,0,0,0.3);
        -webkit-box-shadow:0 0 20px rgba(0,0,0,0.3);
        -moz-box-shadow:0 0 20px rgba(0,0,0,0.3);
        -o-box-shadow:0 0 20px rgba(0,0,0,0.3);
        border-radius:100px/10px;
        z-index:-1;
    }
    ul{
        margin:20px auto;
        width:80%;
        text-align:center;
    }
    ul li{
        margin:0 20px;
        list-style: none;
        position:relative;
        display:inline-block;
        width:350px;
        height:250px;
        background-color:#fff;
        box-shadow:0 1px 5px rgba(0,0,0,0.27),0 0 5px rgba(0,0,0,0.1) inset;
    }
    ul li img{
        width:330px;
        height:230px;
        margin:10px;
    }

    ul li:after{
        content:'';
        position:absolute;
        z-index:-1;
        width:90%;
        height:80%;
        left:10px;
        bottom:15px;
        background-color:transparent;
        transform:skew(10deg) rotate(5deg);
        -webkit-transform: skew(10deg) rotate(5deg);
        -o-transform: skew(10deg) rotate(5deg);
        -moz-transform: skew(10deg) rotate(5deg);
        box-shadow:0 10px 20px rgba(0,0,0,0.3);
        -webkit-box-shadow:0 10px 20px rgba(0,0,0,0.3);
        -moz-box-shadow:0 10px 20px rgba(0,0,0,0.3) ;
        -o-box-shadow:0 10px 20px rgba(0,0,0,0.3) ;
    }
    ul li:before{
        content:'';
        position:absolute;
        z-index:-1;
        width:90%;
        height:80%;
        right:10px;
        bottom:15px;
        background-color:transparent;
        transform:skew(-10deg) rotate(-5deg);
        -webkit-transform: skew(-10deg) rotate(-5deg);
        -o-transform: skew(-10deg) rotate(-5deg);
        -moz-transform: skew(-10deg) rotate(-5deg);
        box-shadow:0 10px 20px rgba(0,0,0,0.3);
        -webkit-box-shadow:0 10px 20px rgba(0,0,0,0.3);
        -moz-box-shadow:0 10px 20px rgba(0,0,0,0.3) ;
        -o-box-shadow:0 10px 20px rgba(0,0,0,0.3) ;
    }
</style>
<body>
    <div class="wrapper effect">
        <h2>Hello,the world</h2>
    </div>
    <ul>
        <li><img src="test1.png"></li>
        <li><img src="test2.png"></li>
        <li><img src="Lighthouse.jpg"></li>
    </ul>
</body>
</html>

没有更多推荐了,返回首页