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;
    }
  • 相关阅读:
    第10组 团队展示
    第一次结对编程作业
    13.Vue.js 组件
    12.Vue.js 表单
    11.Vue.js-事件处理器
    10.Vue.js 样式绑定
    9.Vue.js 监听属性
    8.Vue.js-计算属性
    7.循环语句
    6.Vue.js-条件与循环
  • 原文地址:https://www.cnblogs.com/NatChen/p/8038460.html
Copyright © 2011-2022 走看看