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>
原文地址:https://www.cnblogs.com/bober/p/2670833.html