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;
    }
  • 相关阅读:
    个人技术博客
    第十七周19年春学习总结
    第十六周第四次实验设计报告
    第十五周第三次实验设计报告
    第十四周第二次试验设计报告
    第十三周
    第十二周
    第十一周
    第十周作业
    只为粗暴看一下ES6的字符串模板的性能
  • 原文地址:https://www.cnblogs.com/NatChen/p/8038460.html
Copyright © 2011-2022 走看看