码迷,mamicode.com
首页 > Web开发 > 详细

css 纸张效果 666

时间:2018-09-30 14:57:19      阅读:575      评论:0      收藏:0      [点我收藏+]

标签:auto   style   ott   idt   white   text   for   bottom   osi   

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>

 

css 纸张效果 666

标签:auto   style   ott   idt   white   text   for   bottom   osi   

原文地址:https://www.cnblogs.com/Mvloveyouforever/p/9728971.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!