zoukankan      html  css  js  c++  java
  • CSS3 box-shadow实现纸张的曲线投影效果

    一般的投影效果,尤其通过CSS实现的投影效果(无论是CSS3,还是IE滤镜),都是直来直往的。纸张是有卷角的,其投影就是曲面的,如何使用CSS模拟出纸张的卷边曲线投影效果。

    <div class="curved_box"></div>
    .curved_box {
        display: inline-block;
        *display: inline;
        200px;
        height: 248px;
        margin: 20px;
        background-color: #fff;
        border: 1px solid #eee;
        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px 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;
        position: relative;
        *zoom: 1;
    }
    .curved_box:before {
        -webkit-transform: skew(-15deg) rotate(-6deg);
        -moz-transform: skew(-15deg) rotate(-6deg);
        transform: skew(-15deg) rotate(-6deg);
        left: 15px;
    }
    .curved_box:after {
        -webkit-transform: skew(15deg) rotate(6deg);
        -moz-transform: skew(15deg) rotate(6deg);
        transform: skew(15deg) rotate(6deg);
        right: 15px;
    }
    .curved_box:before, .curved_box:after {
        70%;
        height: 55%;
        content: ' ';
        
        -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);
        
        position: absolute;
        bottom: 10px;
        z-index: -1;
    }
  • 相关阅读:
    实现移动端1像素线--stylus
    用户信息认证session和token
    深入了解new的过程,和call,apply,bind的区别
    微信公众号开发过程--踏坑指南
    Better-scroll巨坑!!!
    JS ES6中Arguments和Parameters的区别
    知识点1
    面试--随笔1
    pytts3语音合成遇到的中文问题
    需求,需要谁参与进来?
  • 原文地址:https://www.cnblogs.com/NatChen/p/8038460.html
Copyright © 2011-2022 走看看