<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
position: relative;
width: 300px;
height: 400px;
margin: 50px auto;
border: 1px solid #ccc;
border-bottom-right-radius: 60px;
background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1, #f3f3f3));
box-shadow: -1px 2px 2px rgba(0, 0, 0, .2);
}
/*
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop(偏移量小数,停靠颜色值),...] );
渐变的类型? (linear)
渐变开始的X Y 轴坐标(0 0 – 或者left-top)
渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
开始的颜色? (from(red))
结束的颜色? (to(blue))
*/
div:before {
content: '';
width: 25px;
height: 20px;
position: absolute;
right: 0;
bottom: 0;
border-bottom-right-radius: 30px;
box-shadow: -2px -2px 5px rgba(0, 0, 0, .3);
transform: rotate(-20deg) skew(-40deg, -3deg) translate(-13px, -13px);
}
div:after {
content: '';
width: 100px;
height: 100px;
position: absolute;
z-index: -1;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, .2);
box-shadow: 20px 20px 8px rgba(0, 0, 0, .2);
transform: translate(-45px, -20px) skew(20deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
