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>
posted @ 2012-09-04 18:51  Care健康  阅读(514)  评论(0)  编辑  收藏  举报
版权
作者：Bober Song

出处：http://bober.cnblogs.com

Care健康：http://www.aicareyou.com

推荐空间：华夏名网

本文首发博客园，版权归作者跟博客园共有。

转载必须保留本段声明，并在页面显著位置给出本文链接，否则保留追究法律责任的权利。