CSS3两角卷起效果

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>

作者：Bober Song
出处：http://bober.cnblogs.com/
CARE健康网: http://www.aicareyou.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
相关阅读:
RHEL5.8配置开机自动挂载磁盘
 RHEL5.8配置NFS服务
 Linux环境下Oracle数据库启动停止命令
 使用的组件：Layui
使用的组件：Jcrop
使用的组件：ckeditor
使用的组件：Web Uploader
WebSphere试用过期问题处理
 webpack学习笔记（一）
如何用node命令和webpack命令传递参数转载
原文地址：https://www.cnblogs.com/bober/p/2670833.html