zoukankan      html  css  js  c++  java

  • CSS3两角卷起效果

    <style>
    body     { 
        height    :120%;
    　　scrollbar-face-color    :#C0C0C0;  　　
    　　scrollbar-highlight-color    :#FFFFFF;
    　　scrollbar-3dlight-color    :#C0C0C0;
    　　scrollbar-darkshadow-color    :#000000; 
    　　scrollbar-Shadow-color    :#808080; 
    　　scrollbar-arrow-color    :#000000; 
    　　scrollbar-track-color    :#E0E0E0;
    }
        .curved_box     {
        display    : inline-block;
        *display    : inline;
        width    : 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     {
        width    : 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;
    }
    </style>
    <body><div class="curved_box"></div></body>
  • 相关阅读:
    CentOS yum 源的配置与使用
    CentOS 添加常用 yum 源
    给centOs添加epel源
    centos 推荐使用epel源
    如何在CentOS 5/6上安装EPEL 源
    为centos添加第三方源
    Linux远程桌面工具 -- NoMachine
    Redis windows版本的启停bat脚本命令
    Elasticsearch+Hbase实现海量数据秒回查询
    mysql 与elasticsearch实时同步常用插件及优缺点对比(ES与关系型数据库同步)
  • 原文地址：https://www.cnblogs.com/bober/p/2670833.html
Copyright © 2011-2022 走看看