首页 > Web开发 > 详细

css 纸张效果 666

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

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!