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;
    }
  • 相关阅读:
    DRBD试用手记
    hibernate get load difference
    4招将PPT文本转换成Doc文本
    about lucene merepolicy
    关于Lucene索引合并解决方法
    网站优化工具帮助
    A/B Experiments with Google Website Optimizer
    about lucene grouping and facet history
    Spring IDE 1.2.4发布
    HTML meta refresh 刷新与跳转(重定向)页面
  • 原文地址:https://www.cnblogs.com/NatChen/p/8038460.html
Copyright © 2011-2022 走看看