zoukankan      html  css  js  c++  java
  • CSS3 两底角微卷起的投影效果

    .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 {
         75%;
        height:50%;
        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;
    }
    <div class="curved_box"></div>

    关键思路是以下三块:

    .curved_box:before;
    .curved_box:after;
    {content: ' '}

    curved_box,  curved_box:before,  curved_box:after一共三个,
    curved_box:before,  curved_box:after位于curved_box的“下面”(z-index: -1);


    1.设伪类before和after,结合content属性。就相当于(注意是相当于,不是真的,可以这样理解)创建了两个盒子,其内容是content里面的内容,现在为空"".

    2.定义这两个“盒子”的:

      置位:(position: absolute;z-index: -1;bottom: 10px;)

      形状:(transform: skew(15deg) rotate(6deg);box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);)

      大小:( 75%; height:50%;)

    以下是效果图:

     (大家可以试着改变: 75%; height:50%; 这两个属性值,就会发现下面确实有两个“盒子”,或者删除一个“盒子”curved_box:before的所有样式);

    这是before,after,content的详解文章

     

  • 相关阅读:
    Spring-----<context:annotation-config/>
    Spring-----代码中使用注入的Properties配置属性
    Spring-----事务配置的五种方式
    读书汇总贴
    读书_2019年
    有道词典_每日一句_2019/08
    微信小程序 报错Failed to load image
    有道词典_每日一句_2019/07
    微信小程序 base64格式图片的显示及保存
    Mac版微信无法安装之始末
  • 原文地址:https://www.cnblogs.com/lufy/p/2489660.html
Copyright © 2011-2022 走看看