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>
  • 相关阅读:
    线性回归——梯度下降
    Python 实现 KNN（K-近邻）算法
    Python 增加博客园阅读量
    阿里云CentOS安装配置Python3.7及pip3
    OnlineJudge难度与正确度的相关性检验
    jsp、jQuery、servlet交互实现登录功能
    Java Web中提交表单之后跳转到WebContent目录下的子目录里的jsp文件
    python3爬虫——下载unsplash美图到本地
    defer原理、性能、优化
    Python生成器和迭代器
  • 原文地址：https://www.cnblogs.com/bober/p/2670833.html
Copyright © 2011-2022 走看看