一个div 实现纸张阴影效果

.box {
                position: relative;
                width: 250px;
                height: 150px;
                border: 1px solid #efefef;
                margin: 100px auto;
                background: #fff;
                -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
                -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
                box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
            }
            
            .box:before,
            .box:after {
                content: '';
                z-index: -1;
                position: absolute;
                left: 10px;
                bottom: 10px;
                width: 70%;
                max-width: 300px;
                /* avoid rotation causing ugly appearance at large container widths */
                max-height: 100px;
                height: 55%;
                -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
                -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
                -webkit-transform: skew(-15deg) rotate(-6deg);
                -moz-transform: skew(-15deg) rotate(-6deg);
                -ms-transform: skew(-15deg) rotate(-6deg);
                -o-transform: skew(-15deg) rotate(-6deg);
                transform: skew(-15deg) rotate(-6deg);
            }
            
            .box:after {
                left: auto;
                right: 10px;
                -webkit-transform: skew(15deg) rotate(6deg);
                -moz-transform: skew(15deg) rotate(6deg);
                -ms-transform: skew(15deg) rotate(6deg);
                -o-transform: skew(15deg) rotate(6deg);
                transform: skew(15deg) rotate(6deg);
            }

 

转载于:https://www.cnblogs.com/xzma/p/7575061.html