- <!doctype html>
- <html>
- <head>
- <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>
- </head>
- <body><div class="curved_box"></div></body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/250920136093.html
来源: http://www.codesnippet.cn/detail/250920136093.html