书籍阴影 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>阴影</title>    
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .shadow{
            width: 100px;height: 150px;border:1px solid rgba(244,245,247,0.5);
            position: relative;
            box-shadow: 0 4px 8px 0 rgba(184,197,217,.5);
        }
        .shadow img{
            /*border:1px solid #eee;*/
            display: block;
            /*background-color: pink;*/
        }
        /*.shadow:before{
            position: absolute;
            content: '';
            top: 0;
            width: 92px;
            height: 150px;
            left: 4px;
            box-shadow: 0 4px 8px 0 rgba(184,197,217,.5);
            z-index: -1;
            background-color: pink;
        }*/
    </style>
</head>
<body style="display: flex;align-items: center;justify-content: center;min-height: 400px;background-color: #fff">
    <div class="shadow">
        <!-- <img src="" width="100px" height="150px"> -->
    </div>
</body>
</html>

 

posted @ 2018-04-12 00:01  仔行天下  阅读(133)  评论(0)    收藏  举报