css 纸张效果 666

css 

　　

/*内外阴影添加*/
        .tool-intro {
            width: 1020px;
            height: 100px;
            margin: 0 auto;
            margin-bottom: 50px;
            padding: 20px;
            text-align: left;
            font-size: 14px;
            position: relative;
            background-color: White;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset;
            -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            -ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset;
        }

        /*增加底部的重阴影效果  555~ 好技巧*/
        .tool-intro::before, .tool-intro::after {
            content: "";
            position: absolute;
            top: 50%;
            bottom: 0;
            left: 10px;
            right: 10px;
            z-index: -1;
            box-shadow: 0 0 20px rgba(0,0,0,0.8);
            -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);
            -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);
            -ms-box-shadow: 0 0 20px rgba(0,0,0,0.8);
            border-radius: 100px/10px;
            -moz-border-radius: 100px/10px;
        }
<article class="tool-intro">
        
        </article>

 

posted @ 2018-09-30 12:03  MvloveYouForever  阅读(441)  评论(0)  编辑  收藏  举报