1 <!DOCTYPE>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>ShadowCards</title>
6 <style>
7 body {
8 background: #e2e1e0;
9 text-align: center;
10 }
11 .box {
12 width: 300px;
13 min-height: 300px;
14 margin: 30px;
15 display: inline-block;
16 background: #fff;
17 border: 1px solid #ccc;
18 position:relative;
19 }
20 /*=========Box1===========*/
21 .box1{
22 background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#fff), to(#fff), color-stop(.1,#f3f3f3));
23 background: -webkit-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);
24 background: -moz-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);
25 background: -o-linear-gradient(0% 0%, #fff, #f3f3f3 10%, #fff);
26 /*设置Box的阴影效果*/
27 -webkit-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
28 -moz-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
29 box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
30 /*制作右下脚折边效果*/
31 -moz-border-radius: 0 0 6px 0 / 0 0 50px 0;
32 -webkit-border-radius: 0 0 6px 0 / 0 0 50px 0;
33 border-radius: 0 0 6px 0 / 0 0 50px 0;
34 }
35 /*使用:before来制作底部阴影，并对阴影进行旋转的扭曲和位移设置*/
36 .box1:before{ content: '';
37 width: 50px;
38 height: 100px;
39 position:absolute;
40 bottom:0; right:0;
41 -webkit-box-shadow: 20px 20px 10px rgba(0, 0, 0, 0.1);
42 -moz-box-shadow: 20px 20px 15px rgba(0, 0, 0, 0.1);
43 box-shadow: 20px 20px 15px rgba(0, 0, 0, 0.1);
44 z-index:-1;
45 -webkit-transform: translate(-35px,-40px) skew(0deg,30deg) rotate(-25deg);
46 -moz-transform: translate(-35px,-40px) skew(0deg,32deg) rotate(-25deg);
47 -o-transform: translate(-35px,-40px) skew(0deg,32deg) rotate(-25deg);
48 transform: translate(-35px,-40px) skew(0deg,32deg) rotate(-25deg);
49 }
50 /*使用:after来制作顶部的阴影，并对阴影进行旋转的扭曲和位移设置*/
51 .box1:after{ content: '';
52 width: 100px;
53 height: 100px;
54 top:0; left:0;
55 position:absolute;
56 display: inline-block;
57 z-index:-1;
58 -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
59 -moz-box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.2);
60 box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.2);
61 -webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg);
62 -moz-transform: rotate(7deg) translate(20px,25px) skew(20deg);
63 -o-transform: rotate(7deg) translate(20px,25px) skew(20deg);
64 transform: rotate(7deg) translate(20px,25px) skew(20deg);
65 }
66 /*==========Box2============*/
67 .box2{ padding: 0 0 1px 0;
68 background: #f3f3f3;
69 background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
70 background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
71 background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
72 background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
73 border-top: 1px solid #ccc;
74 border-right: 1px solid #ccc;
75 -webkit-border-radius: 0 0 60px 0 / 0 0 60px 0;
76 -moz-border-radius: 0 0 60px 0 / 0 0 60px 0;
77 border-radius: 0 0 60px 0 / 0 0 60px 0;
78 -webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
79 -moz-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
80 box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
81 }
82 .box2:before{
83 content:'';
84 width: 25px;
85 height: 20px;
86 position: absolute;
87 bottom:0;
88 right:0;
89 -webkit-border-radius: 0 0 30px 0;
90 -moz-border-radius: 0 0 30px 0;
91 border-radius: 0 0 30px 0;
92 -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
93 -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
94 box-shadow:-2px -2px 5px rgba(0, 0, 0, 0.3);
95 -webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
96 -moz-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
97 -o-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
98 transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
99 }
100 /*这里，我们做出的褶皱阴影*/
101 .box2:after{ content: '';
102 z-index: -1;
103 width: 100px;
104 height: 100px;
105 position:absolute;
106 bottom:0;
107 right:0;
108 background: rgba(0, 0, 0, 0.2);
109 display: inline-block;
110 -webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
111 -moz-box-shadow: 20px 20px 18px rgba(0, 0, 0, 0.2);
112 box-shadow: 20px 20px 8px rgba()0,0,0,0.2;
113 -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
114 -moz-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
115 -o-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
116 transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
117 }
118 /*==========Box3=========*/
119 .box3{ padding: 5px 0 ;
120 background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
121 background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
122 background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
123 background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
124 -webkit-border-radius: 60px / 5px;
125 -moz-border-radius: 60px / 5px;
126 border-radius:60px / 5px;
127 -webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
128 -moz-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
129 box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
130 }
131
132 .box3:before{ content: '';
133 width: 50px;
134 height: 50px;
135 top:0; right:0;
136 position:absolute;
137 display: inline-block;
138 z-index:-1;
139 -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
140 -moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
141 box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
142 -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
143 -moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
144 -o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
145 transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
146 }
147
148 .box3:after{ content: '';
149 width: 100px;
150 height: 100px;
151 top:0; left:0;
152 position:absolute;
153 z-index:-1;
154 display: inline-block;
155 -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
156 -moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
157 box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
158 -webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg);
159 -moz-transform: rotate(2deg) translate(20px,25px) skew(20deg);
160 -o-transform: rotate(2deg) translate(20px,25px) skew(20deg);
161 transform: rotate(2deg) translate(20px,25px) skew(20deg);
162 }
163 /*============Box4==============*/
164 .box4{
165 padding: 5px 0 ;
166 background: #fff;
167 background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#fff), to(#fff), color-stop(.2, #f2f2f2));
168 background: -webkit-linear-gradient(0% 0% 360deg, #fff, #f2f2f2 20%, #fff );
169 background: -moz-linear-gradient(0% 0% 360deg, #fff, #f2f2f2 20%, #fff );
170 background: -o-linear-gradient(0% 0% 360deg, #fff, #f2f2f2 20%, #fff );
171 -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
172 -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
173 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
174 }
175
176 .box4:before{ content: '';
177 width: 50px;
178 height: 50px;
179 top:0; right:0;
180 position:absolute;
181 z-index: -1;
182 -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
183 -moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
184 box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
185 -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
186 -moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
187 -o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
188 transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
189 }
190 .box4:after{ content: '';
191 width: 50px;
192 height: 50px;
193 top:0; left:0;
194 position:absolute;
195 z-index:-1;
196 display: inline-block;
197 -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
198 -moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
199 box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
200 -webkit-transform: rotate(2deg) translate(12px,25px) skew(20deg);
201 -moz-transform: rotate(2deg) translate(12px,25px) skew(20deg);
202 -o-transform: rotate(2deg) translate(12px,25px) skew(20deg);
203 transform: rotate(2deg) translate(12px,25px) skew(20deg);
204 }
205 /*盒子右下角阴影效果*/
206 .box4 .shBr{ width: 100px;
207 height: 100px;
208 bottom:0; right:0;
209 position:absolute;
210 z-index: -1;
211 -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
212 -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
213 box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
214 -webkit-transform: rotate(0deg) translate(-20px,-15px) skew(20deg);
215 -moz-transform: rotate(0deg) translate(-20px,-15px) skew(20deg);
216 -o-transform: rotate(0deg) translate(-20px,-15px) skew(20deg);
217 transform: rotate(0deg) translate(-20px,-15px) skew(20deg);
218 }
219 /*盒子左下角阴影效果*/
220 .box4 .shBl{ width: 100px;
221 height: 100px;
222 bottom:0; left:0;
223 position:absolute;
224 z-index: -1;
225 -webkit-box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2);
226 -moz-box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2);
227 box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2);
228 -webkit-transform: rotate(0deg) translate(20px,-15px) skew(-20deg);
229 -moz-transform: rotate(0deg) translate(20px,-15px) skew(-20deg);
230 -o-transform: rotate(0deg) translate(20px,-15px) skew(-20deg);
231 transform: rotate(0deg) translate(20px,-15px) skew(-20deg);
232 }
233 /*==========Box5==========*/
234 .box5{ padding: 0 0 1px 0;
235 background: #f3f3f3;
236 background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
237 background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
238 background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
239 background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
240 border-top: 1px solid #ccc;
241 border-right: 1px solid #ccc;
242 -webkit-border-radius: 0 0 60px 60px / 0 0 60px 60px;
243 -moz-border-radius: 0 0 60px 60px / 0 0 60px 60px;
244 border-radius: 0 0 60px 60px / 0 0 60px 60px;
245 -webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
246 -moz-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
247 box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
248 }
249 /*右折效果*/
250 .box5:before{ content:'';
251 width: 25px;
252 height: 20px;
253 background: white;
254 position: absolute;
255 bottom:0; right:0;
256 background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));
257 background: -webkit-linear-gradient(0 50% 90deg, #fff, #fff 10%, #eee);
258 background: -moz-linear-gradient(0 50% 90deg, #fff, #fff 10%, #eee);
259 background: -o-linear-gradient(0 50% 90deg, #fff, #fff 10%, #eee);
260 -webkit-border-radius: 0 0 30px 0;
261 -moz-border-radius: 0 0 30px 0;
262 border-radius: 0 0 30px 0;
263 -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
264 -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
265 box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
266 -webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
267 -moz-transform: rotate(-20deg) skew(-40deg,-3deg)translate(-13px,-13px);
268 -o-transform: rotate(-20deg)skew(-40deg,-3deg) translate(-13px,-13px);
269 transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
270 }
271
272 /*右折的阴影*/
273 .box5:after{ content: '';
274 z-index: -10;
275 width: 100px;
276 height: 100px;
277 position:absolute;
278 bottom:0;
279 right:0;
280 background: rgba(0, 0, 0, 0.2);
281 display: inline-block;
282 -webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
283 -moz-box-shadow: 20px 20px 18px rgba(0, 0, 0, 0.2);
284 box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
285 -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
286 -moz-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
287 -o-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
288 transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
289 }
290 /*左下角折角*/
291 .box5 .shBlFlod{ z-index: -10;
292 width: 50px;
293 height: 50px;
294 position:absolute;
295 bottom:0; left:0;
296 -webkit-box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2);
297 -moz-box-shadow: -20px 20px 18px rgba(0, 0, 0, 0.2);
298 box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2);
299 -webkit-transform: rotate(0deg) translate(40px,-20px) skew(-20deg);
300 -moz-transform: rotate(0deg) translate(40px,-20px) skew(-20deg);
301 -o-transform: rotate(0deg) translate(40px,-20px) skew(-20deg);
302 transform: rotate(0deg) translate(40px,-20px) skew(-20deg);
303 }
304 /*左下角阴影*/
305 .box5 .shBl{ content:'';
306 width: 25px;
307 height: 20px;
308 background: white;
309 position: absolute;
310 bottom:0; left:0;
311 background: #fff;
312 background: -webkit-gradient(linear, 0% 20%, 50% 80%, from(#fff), to( #eee), color-stop(.1,#fff));
313 background: -webkit-linear-gradient(0 50%, #fff, #fff 10%, #eee);
314 background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee);
315 background: -o-linear-gradient(0 50%, #fff, #fff 10%, #eee);
316 -webkit-border-radius:0 0 30px 0;
317 -moz-border-radius:0 0 30px 0;
318 border-border-radius:0 0 30px 0;
319 -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
320 -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
321 box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
322 -webkit-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);
323 -moz-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);
324 -o-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);
325 transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);
326 }
327 /*=========Box6========*/
328 .box6{ padding: 0 0 1px 0;
329 background:#fff;
330 background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
331 background: -webkit-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);
332 background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);
333 background: -o-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);
334 border-top: 1px solid #ccc;
335 border-right: 1px solid #ccc;
336 border-left: 1px solid #ccc;
337 -webkit-border-radius: 60px 60px 60px 0 / 5px 5px 60px 0;
338 border-radius: 60px 60px 60px 0 / 5px 5px 60px 0;
339 border-radius: 60px 60px 60px 0 / 5px 5px 60px 0;
340 -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
341 -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
342 box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
343 }
344
345 .box6:before{ content:'';
346 width: 25px;
347 height: 20px;
348 position: absolute;
349 bottom:0;
350 right:0;
351 -webkit-border-radius: 0 0 30px 0;
352 -moz-border-radius: 0 0 30px 0;
353 border-radius: 0 0 30px 0;
354 -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
355 -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
356 box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
357 -webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
358 -moz-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
359 -o-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
360 transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
361 }
362
363 .box6:after{ content: '';
364 z-index: -10;
365 width: 100px;
366 height: 100px;
367 position:absolute;
368 bottom:0;
369 right:0;
370 background: rgba(0, 0, 0, 0.2);
371 display: inline-block;
372 -webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
373 -moz-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
374 box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
375 -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
376 -moz-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
377 -o-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
378 transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
379 }
380 .box6 .cornerLf{ width: 100px;
381 height: 100px;
382 top:0; left:0;
383 position:absolute;
384 z-index:-6;
385 display: inline-block;
386 -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
387 -moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
388 box-shadow: -10px -10px 20px rgba(0, 0, 0, 0.2);
389 -webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg);
390 -moz-transform: rotate(2deg) translate(20px,20px) skew(20deg);
391 -o-transform: rotate(2deg) translate(20px,20px) skew(20deg);
392 transform: rotate(2deg) translate(20px,20px) skew(20deg);
393 }
394 .box6 .cornerRt{ content: '';
395 width: 50px;
396 height: 50px;
397 top:0; right:0;
398 position:absolute;
399 display: inline-block;
400 z-index:-6;
401 -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
402 -moz-box-shadow: 10px -10px 18px rgba(0, 0, 0, 0.2);
403 box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
404 -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
405 -moz-transform: rotate(2deg) translate(-14px,15px) skew(-20deg);
406 -o-transform: rotate(2deg) translate(-14px,15px) skew(-20deg);
407 transform: rotate(2deg) translate(-14px,15px) skew(-20deg);
408 }
409 /*==========Box7=========*/
410 .box7{ padding: 0 0 1px 0;
411 background: #fff;
412 background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
413 background: -webkit-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);
414 background: -o-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);
415 background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f3f3f3);
416 border-top: 1px solid #ccc;
417 border-right: 1px solid #ccc;
418 border-left: 1px solid #ccc;
419 -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
420 -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
421 box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
422 }
423
424 .box7:before{ content: '';
425 position:absolute;
426 width: 130px;
427 height: 30px;
428 border-left: 1px dashed rgba(0, 0, 0, 0.1);
429 border-right: 1px dashed rgba(0, 0, 0, 0.1);
430 background: rgba(0, 0, 0, 0.1);
431 background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
432 background: -webkit-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
433 background: -o-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
434 background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
435 -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
436 -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
437 box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
438 -webkit-transform:translate(-50px,10px) skew(10deg,10deg) rotate(-50deg);
439 -moz-transform:translate(-50px,10px) skew(10deg,10deg) rotate(-50deg);
440 -o-transform:translate(-50px,10px) skew(10deg,10deg) rotate(-50deg);
441 transform:translate(-50px,10px) skew(10deg,10deg) rotate(-50deg);
442 }
443 .box7:after{ content: '';
444 position:absolute;
445 right:0;
446 bottom:0;
447 width: 130px;
448 height: 30px;
449 background: rgba(0, 0, 0, 0.1);
450 background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
451 background: -webkit-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
452 background: -o-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
453 background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
454 border-left: 1px dashed rgba(0, 0, 0, 0.1);
455 border-right: 1px dashed rgba(0, 0, 0, 0.1);
456 -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
457 -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
458 box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
459 -webkit-transform: translate(50px,-20px) skew(10deg,10deg) rotate(-50deg);
460 -moz-transform: translate(50px,-20px) skew(10deg,10deg) rotate(-50deg);
461 -o-transform: translate(50px,-20px) skew(10deg,10deg) rotate(-50deg);
462 transform: translate(50px,-20px) skew(10deg,10deg) rotate(-50deg)
463 }
464 /*==========Box8=========*/
465 .box8{ border: 2px solid #ccc;
466 background: rgba(0, 0, 0, 0.5);
467 -webkit-box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1);
468 -moz-box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1);
469 box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1);
470 }
471
472 .box8:before{ content: '';
473 width: 110%;
474 left: 0;
475 height: 110%;
476 z-index:-1;
477 position:absolute;
478 border: 1px solid #ccc;
479 background: #f3f3f3;
480 background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
481 background: -webkit-linear-gradient(0 0 90deg, #f3f3f3, #f3f3f3 10%, #fff);
482 background: -o-linear-gradient(0 0 90deg, #f3f3f3, #f3f3f3 10%, #fff);
483 background: -moz-linear-gradient(0 0 90deg, #f3f3f3, #f3f3f3 10%, #fff);
484 -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
485 -moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.1);
486 box-shadow: 0px 0px 12px rgba(0,0,0,0.1);
487 -webkit-transform: translate(-5%,-5%);
488 -moz-transform: translate(-5%, -5%);
489 -o-transform: translate(-5%, -5%);
490 transform: translate(-5%, -5%);
491 }
492
493 .box8:after{ content: '';
494 width: 100%;
495 left: 0;
496 height: 79%;
497 z-index:-2;
498 background: none;
499 position:absolute;
500 -webkit-border-radius: 20px;
501 -moz-border-radius: 20px;
502 border-radius: 20px;
503 -webkit-box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2);
504 -moz-box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2);
505 box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2);
506 -webkit-transform: translate(0,0);
507 -moz-transform: translate(0,0);
508 -o-transform: translate(0,0);
509 transform: translate(0,0);
510 }
511 /*=========Box9=======*/
512 .box9{ border: 1px solid rgba(0,0,0,0.1);
513 -webkit-border-radius: 20px;
514 -moz-border-radius: 20px;
515 border-radius:20px;
516 background: white;
517 -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
518 -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
519 box-shadow:0px 0px 5px rgba(0,0,0,0.3);
520 }
521 /*底部的透明框效果*/
522 .box9:before{ content: '';
523 width: 110%;
524 left: 0;
525 height: 111%;
526 z-index:-1;
527 position:absolute;
528 -webkit-border-radius: 20px;
529 -moz-border-radius: 20px;
530 border-radius:20px;
531 border: 1px solid rgba(0,0,0, 0.1);
532 background: rgba(0, 0, 0, 0.0);
533 -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
534 -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
535 box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
536 -webkit-transform: translate(-5%,-5%);
537 -moz-transform: translate(-5%, -5%);
538 -o-transform: translate(-5%, -5%);
539 transform: translate(-5%, -5%);
540 }
541 /*这是框的顶部部分的粘带效果*/
542 .box9:after{ content: '';
543 position:absolute;
544 top:-25px; left: 30%;
545 width: 130px;
546 height: 40px;
547 background: rgba(0, 0, 0, 0.1);
548 background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
549 background: -webkit-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
550 background: -o-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
551 background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
552 border-left: 1px dashed rgba(0, 0, 0, 0.1);
553 border-right: 1px dashed rgba(0, 0, 0, 0.1);
554 -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
555 -moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
556 box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
557 }
558 /*=========Box10=====*/
559 .box10{ padding: 0 0 1px 0;
560 background: #fff;
561 background: -webkit-gradient(linear, 100% 100%, 50% 10%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
562 background: -webkit-linear-gradient(100% 50%, #fff, #fff 10%, #f3f3f3);
563 background: -o-linear-gradient(100% 50%, #fff, #fff 10%, #f3f3f3);
564 background: -moz-linear-gradient(100% 50%, #fff, #fff 10%, #f3f3f3);
565 border: 1px solid #ccc;
566 -webkit-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
567 -moz-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
568 box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
569 -moz-border-radius: 0 0 60px 0 / 0 0 5px 0;
570 -webkit-border-radius: 0 0 60px 0 / 0 0 5px 0;
571 border-radius: 0 0 60px 0 / 0 0 5px 0;
572 }
573 .box10:before{ content: '';
574 width: 98%;
575 z-index:-1;
576 height: 100%;
577 padding: 0 0 1px 0;
578 position: absolute;
579 bottom:0; right:0;
580 background: #fff;
581 background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f9f9f9), color-stop(.1,#fff));
582 background: -webkit-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);
583 background: -o-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);
584 background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);
585 border: 1px solid #ccc;
586 -webkit-box-shadow: 1px 1px 8px rgba(0,0,0, 0.1);
587 -moz-box-shadow: 1px 1px 8px rgba(0,0,0,0.1);
588 box-shadow: 1px 1px 8px rgba(0,0,0,0.1);
589 -moz-border-radius: 0 0 60px 0 / 0 0 5px 0;
590 -webkit-border-radius: 0 0 60px 0 / 0 0 5px 0;
591 border-radius: 0 0 60px 0 / 0 0 5px 0;
592 -webkit-transform: skew(2deg,2deg) translate(3px,8px);
593 -moz-transform: skew(2deg,2deg) translate(3px,8px);
594 -o-transform: skew(2deg,2deg) translate(3px,8px);
595 transform: skew(2deg,2deg) translate(3px,8px);
596 }
597 .box10:after{ content: '';
598 width: 98%;
599 z-index:-1;
600 height: 98%;
601 padding: 0 0 1px 0;
602 position: absolute;
603 bottom:0; right:0;
604 background: #fff;
605 background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#f3f3f3), to(#f6f6f6), color-stop(.1,#fff));
606 background: -webkit-linear-gradient(0 0 360deg, #f3f3f3, #fff 10%, #f6f6f6);
607 background: -o-linear-gradient(0 0 360deg, #f3f3f3, #fff 10%, #f6f6f6);
608 background: -moz-linear-gradient(0 0 360deg, #f3f3f3, #fff 10%, #f6f6f6);
609 border: 1px solid #ccc;
610 -webkit-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
611 -moz-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
612 box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
613 -webkit-transform: skew(2deg,2deg) translate(-1px,2px);
614 -moz-transform: skew(2deg,2deg) translate(-1px,2px) ;
615 -o-transform: skew(2deg,2deg) translate(-1px,2px) ;
616 transform: skew(2deg,2deg) translate(-1px,2px) ;
617 }
618 /*==========Box11========*/
619 .box11{ padding: 0 0 1px 0;
620 background: #f3f3f3;
621 background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
622 background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
623 background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
624 background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
625 border-top: 1px solid white;
626 border-right: 1px solid #ccc;
627 -webkit-border-radius: 0 0 60px 0;
628 -moz-border-radius: 0 0 60px 0;
629 border-radius: 0 0 60px 0;
630 -webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
631 -moz-box-shadow: -1px 2px 2px rgba(0,0,0,0.2);
632 box-shadow: -1px 2px 2px rgba(0,0,0,0.2);
633 }
634 .box11:before{ content:'';
635 width: 25px;
636 height: 20px;
637 background: white;
638 position: absolute;
639 bottom:0; right:0;
640 background:#fff;
641 background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));
642 background: -webkit-linear-gradient(0 50%, #fff, #fff 10%, #eee);
643 background: -o-linear-gradient(0 50%, #fff, #fff 10%, #eee);
644 background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee);
645 -webkit-border-radius: 0 0 30px 0;
646 -moz-border-radius: 0 0 30px 0;
647 border-radius: 0 0 30px 0;
648 -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
649 -moz-box-shadow: -2px -2px 5px rgba(0,0,0,0.3);
650 box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
651 -webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
652 -moz-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
653 -o-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
654 transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
655 }
656
657 .box11:after{ content: '';
658 z-index: -1;
659 width: 100px;
660 height: 100px;
661 position:absolute;
662 bottom:0;
663 right:0;
664 background: rgba(0, 0, 0, 0.2);
665 display: inline-block;
666 -webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
667 -moz-box-shadow: 20px 20px 17px rgba(0,0,0,0.2);
668 box-shadow: 20px 20px 17px rgba(0,0,0,0.2);
669 -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
670 -moz-transform: rotate(0deg) translate(-40px,-17px) skew(20deg);
671 -o-transform: rotate(0deg) translate(-40px,-17px) skew(20deg);
672 transform: rotate(0deg) translate(-40px,-17px) skew(20deg);
673 }
674
675
676 .box11 .ribbon{ position:absolute;
677 top:-25px; left: 30%;
678 width: 130px;
679 height: 40px;
680 background:#ccc;
681 background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
682 background: -webkit-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
683 background: -o-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
684 background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
685 border-left: 1px dashed rgba(0, 0, 0, 0.1);
686 border-right: 1px dashed rgba(0, 0, 0, 0.1);
687 -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
688 -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
689 box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
690 }
691 /*========Box 12========*/
692 .box12{ padding: 0 0 1px 0;
693 background:#f3f3f3;
694 background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
695 background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
696 background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
697 background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
698 border-top: 1px solid #ccc;
699 border-right: 1px solid #ccc;
700 -webkit-border-radius: 0 0 60px 60px;
701 -moz-border-radius: 0 0 60px 60px;
702 border-radius: 0 0 60px 60px;
703 -webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
704 -moz-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
705 box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
706 }
707
708 .box12:before{ content:'';
709 width: 25px;
710 height: 20px;
711 background: white;
712 position: absolute;
713 bottom:0; right:0;
714 background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));
715 background: -webkit-linear-gradient(0 50%, #fff, #fff 10%, #eee);
716 background: -o-linear-gradient(0 50%, #fff, #fff 10%, #eee);
717 background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee);
718 -webkit-border-radius: 0 0 30px 0;
719 -moz-border-radius: 0 0 30px 0;
720 border-radius: 0 0 30px 0;
721 -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
722 -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
723 box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
724 -webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
725 -moz-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
726 -o-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
727 transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
728 }
729
730 .box12:after{ content: '';
731 z-index: -10;
732 width: 100px;
733 height: 100px;
734 position:absolute;
735 bottom:0;
736 right:0;
737 background: rgba(0, 0, 0, 0.2);
738 display: inline-block;
739 -webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
740 -moz-box-shadow: 20px 20px 17px rgba(0, 0, 0, 0.2);
741 box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
742 -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
743 -moz-transform: rotate(0deg) translate(-40px,-17px) skew(20deg);
744 -o-transform: rotate(0deg) translate(-40px,-17px) skew(20deg);
745 transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
746 }
747 .box12 .shBlFlod{ z-index: -10;
748 width: 50px;
749 height: 50px;
750 position:absolute;
751 bottom:0; left:0;
752 -webkit-box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2);
753 -moz-box-shadow: -20px 20px 17px rgba(0, 0, 0, 0.2);
754 box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2);
755 -webkit-transform: rotate(0deg) translate(40px,-20px) skew(-20deg);
756 -moz-transform: rotate(0deg) translate(40px,-17px) skew(-20deg);
757 -o-transform: rotate(0deg) translate(40px,-17px) skew(-20deg);
758 transform: rotate(0deg) translate(40px,-20px) skew(-20deg);
759 }
760 .box12 .shBl{ width: 25px;
761 height: 20px;
762 z-index:20;
763 background: white;
764 position: absolute;
765 bottom:0; left:0;
766 background: -webkit-gradient(linear, 0% 20%, 50% 80%, from(#fff), to( #eee), color-stop(.1,#fff));
767 background: -webkit-linear-gradient(0 50%, #fff, #fff 10%, #eee);
768 background: -o-linear-gradient(0 50%, #fff, #fff 10%, #eee);
769 background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee);
770 -webkit-border-radius: 0 0 30px 0;
771 -moz-border-radius: 0 0 30px 0;
772 border-radius: 0 0 30px 0;
773 -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
774 -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
775 box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
776 -webkit-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);
777 -moz-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);
778 -o-transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);
779 transform: rotate(103deg) skew(-3deg,-40deg) translate(-13px,-15px);
780 }
781
782 .box12 .ribbon{ content: '';
783 position:absolute;
784 top:-25px; left: 30%;
785 width: 130px;
786 height: 40px;
787 background: #ccc;
788 background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
789 background: -webkit-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
790 background: -o-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
791 background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
792 border-left: 1px dashed rgba(0, 0, 0, 0.1);
793 border-right: 1px dashed rgba(0, 0, 0, 0.1);
794 -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
795 -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
796 box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
797 }
798 /*=======Box 13=====*/
799 .box13{ padding: 0 0 1px 0;
800 background:#fff;
801 background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
802 background: -webkit-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);
803 background: -o-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);
804 background: -moz-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);
805 border-top: 1px solid #ccc;
806 border-right: 1px solid #ccc;
807 border-left: 1px solid #ccc;
808 -webkit-border-radius: 60px 60px 60px 0 / 5px 5px 60px 0;
809 -moz-border-radius: 60px 60px 60px 0 / 5px 5px 60px 0;
810 border-radius: 60px 60px 60px 0 / 5px 5px 60px 0;
811 -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
812 -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
813 box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;
814 }
815 .box13:before{ content:'';
816 width: 25px;
817 height: 20px;
818 position: absolute;
819 bottom:0;
820 right:0;
821 -webkit-border-radius: 0 0 30px 0;
822 -moz-border-radius: 0 0 30px 0;
823 border-radius: 0 0 30px 0;
824 -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
825 -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
826 box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
827 -webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
828 -moz-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
829 -o-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
830 transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
831 }
832 .box13:after{ content: '';
833 z-index: -10;
834 width: 100px;
835 height: 100px;
836 position:absolute;
837 bottom:0;
838 right:0;
839 background: rgba(0, 0, 0, 0.2);
840 display: inline-block;
841 -webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
842 -moz-box-shadow: 20px 20px 18px rgba(0, 0, 0, 0.2);
843 box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
844 -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
845 -moz-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
846 -o-transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
847 transform: rotate(0deg) translate(-45px,-20px) skew(20deg);
848 }
849 .box13 .cornerLf{ width: 100px;
850 height: 100px;
851 top:0; left:0;
852 position:absolute;
853 z-index:-6;
854 display: inline-block;
855 -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
856 -moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
857 box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
858 -webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg);
859 -moz-transform: rotate(2deg) translate(20px,25px) skew(20deg);
860 -o-transform: rotate(2deg) translate(20px,25px) skew(20deg);
861 transform: rotate(2deg) translate(20px,25px) skew(20deg);
862 }
863
864 .box13 .cornerRt{ content: '';
865 width: 50px;
866 height: 50px;
867 top:0; right:0;
868 position:absolute;
869 display: inline-block;
870 z-index:-6;
871 -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
872 -moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
873 box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
874 -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
875 -moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
876 -o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
877 transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
878 }
879
880 .box13 .ribbon:before{ content: '';
881 position:absolute;
882 top:0; left: 0;
883 width: 130px;
884 height: 40px;
885 background:rgba(0,0,0,0.2);
886 background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
887 background: -webkit-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
888 background: -o-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
889 background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
890 border-left: 1px dashed rgba(0, 0, 0, 0.1);
891 border-right: 1px dashed rgba(0, 0, 0, 0.1);
892 -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
893 -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
894 box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
895 -webkit-transform: rotate(90deg) skew(0,0) translate(100px,65px);
896 -moz-transform: rotate(90deg) skew(0,0) translate(100px,65px);
897 -o-transform: rotate(90deg) skew(0,0) translate(100px,65px);
898 transform: rotate(90deg) skew(0,0) translate(100px,65px);
899 }
900 .box13 .ribbon:after{ content: '';
901 position:absolute;
902 top:0; right: 0;
903 width: 130px;
904 height: 40px;
905 background:rgba(0, 0, 0, 0.1);
906 background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
907 background: -webkit-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
908 background: -o-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
909 background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
910 border-left: 1px dashed rgba(0, 0, 0, 0.1);
911 border-right: 1px dashed rgba(0, 0, 0, 0.1);
912 -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
913 -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
914 box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
915 -webkit-transform: rotate(90deg) skew(0,0) translate(100px,-65px);
916 -moz-transform: rotate(90deg) skew(0,0) translate(100px,-65px);
917 -o-transform: rotate(90deg) skew(0,0) translate(100px,-65px);
918 transform: rotate(90deg) skew(0,0) translate(100px,-65px);
919 }
920 /*==========Box14=========*/
921 .box14{ padding: 5px 0 ;
922 background:#fff;
923 background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
924 background: -wbkit-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);
925 background: -o-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);
926 background: -moz-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3);
927 border: 1px solid #ccc;
928 -webkit-border-radius: 60px 5px;
929 -moz-border-radius: 60px/5px;
930 border-radius: 60px/5px;
931 -webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
932 -moz-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
933 box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
934 }
935
936 .box14:before{ content: '';
937 width: 50px;
938 height: 50px;
939 top:0; right:0;
940 position:absolute;
941 display: inline-block;
942 z-index:-1;
943 -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
944 -moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
945 box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
946 -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
947 -moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
948 -o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
949 transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
950 }
951
952 .box14:after{ content: '';
953 width: 100px;
954 height: 100px;
955 top:0; left:0;
956 position:absolute;
957 z-index:-1;
958 display: inline-block;
959 -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
960 -moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
961 box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
962 -webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg);
963 -moz-transform: rotate(2deg) translate(20px,25px) skew(20deg);
964 -o-transform: rotate(2deg) translate(20px,25px) skew(20deg);
965 transform: rotate(2deg) translate(20px,25px) skew(20deg);
966 }
967
968 .box14 .ribbon{ position:absolute;
969 top:0; right: 0;
970 width: 130px;
971 height: 40px;
972 background: rgba(0, 0, 0, 0.1);
973 background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
974 background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
975 border-left: 1px dashed rgba(0, 0, 0, 0.1);
976 border-right: 1px dashed rgba(0, 0, 0, 0.1);
977 -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
978 -moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
979 box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
980 -webkit-transform: rotate(6deg) skew(0,0) translate(-60%,-5px);
981 -moz-transform: rotate(6deg) skew(0,0) translate(-60%,-5px);
982 -o-transform: rotate(6deg) skew(0,0) translate(-60%,-5px);
983 transform: rotate(6deg) skew(0,0) translate(-60%,-5px);
984 }
985 /*=========BOX15======*/
986 .box15{ padding: 0 0 1px 0;
987 background:#fff;
988 background: -webkit-gradient(linear, 100% 100%, 50% 10%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
989 background: -webkit-linear-gradient(100% 50% 90deg, #fff, #fff 10%, #f3f3f3);
990 background: -o-linear-gradient(100% 50% 90deg, #fff, #fff 10%, #f3f3f3);
991 background: -moz-linear-gradient(100% 50% 90deg, #fff, #fff 10%, #f3f3f3);
992 border: 1px solid #ccc;
993 -webkit-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
994 -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.1);
995 box-shadow: 1px 1px 4px rgba(0,0,0,0.1);
996 -webkit-border-radius: 0 0 60px 0 / 0 0 5px 0;
997 -moz-border-radius: 0 0 60px 0 / 0 0 5px 0;
998 border-radius: 0 0 60px 0 / 0 0 5px 0;
999 }
1000
1001 .box15:before{ content: '';
1002 width: 98%;
1003 z-index:-1;
1004 height: 100%;
1005 padding: 0 0 1px 0;
1006 position: absolute;
1007 bottom:0; right:0;
1008 background: #fff;
1009 background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f9f9f9), color-stop(.1,#fff));
1010 background: -webkit-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);
1011 background: -o-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);
1012 background: -moz-linear-gradient(0 0 270deg, #fff, #fff 10%, #f9f9f9);
1013 border: 1px solid #ccc;
1014 -webkit-box-shadow: 1px 1px 8px rgba(0,0,0, 0.1);
1015 -moz-box-shadow: 1px 1px 8px rgba(0,0,0,0.1);
1016 box-shadow: 1px 1px 8px rgba(0,0,0,0.1);
1017 -webkit-border-radius: 0 0 60px 0 / 0 0 5px 0;
1018 -moz-border-radius: 0 0 60px 0 / 0 0 5px 0;
1019 border-radius: 0 0 60px 0 / 0 0 5px 0;
1020 -webkit-transform: skew(2deg,2deg) translate(3px,8px);
1021 -moz-transform: skew(2deg,2deg) translate(3px,8px);
1022 -o-transform: skew(2deg,2deg) translate(3px,8px);
1023 transform: skew(2deg,2deg) translate(3px,8px);
1024 }
1025 .box15:after{ content: '';
1026 width: 98%;
1027 z-index:-1;
1028 height: 98%;
1029 padding: 0 0 1px 0;
1030 position: absolute;
1031 bottom:0; right:0;
1032 background: #f3f3f3;
1033 background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#f3f3f3), to(#f6f6f6), color-stop(.1,#fff));
1034 background: -webkit-linear-gradient(0% 0% 360deg, #f3f3f3, #fff, #f6f6f6);
1035 background: -o-linear-gradient(0% 0% 360deg, #f3f3f3, #fff, #f6f6f6);
1036 background: -moz-linear-gradient(0% 0% 360deg, #f3f3f3, #fff, #f6f6f6);
1037 border: 1px solid #ccc;
1038 -webkit-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
1039 -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.1);
1040 box-shadow: 0px 0px 8px rgba(0,0,0,0.1);
1041 -webkit-transform: skew(2deg,2deg) translate(-1px,2px);
1042 -moz-transform: skew(2deg,2deg) translate(-1px,2px);
1043 -o-transform: skew(2deg,2deg) translate(-1px,2px);
1044 transform: skew(2deg,2deg) translate(-1px,2px);
1045 }
1046
1047 .box15 .ribbon{ position:absolute;
1048 top:0; left: 0;
1049 width: 130px;
1050 height: 40px;
1051 background:rgba(0, 0, 0, 0.1);
1052 background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
1053 background: -webkit-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
1054 background: -o-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
1055 background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
1056 border-left: 1px dashed rgba(0, 0, 0, 0.1);
1057 border-right: 1px dashed rgba(0, 0, 0, 0.1);
1058 -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
1059 -moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
1060 box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
1061 -webkit-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);
1062 -moz-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);
1063 -o-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);
1064 transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);
1065 }
1066 </style>
1067 </head>
1068 <body>
1069 <!-- <div class="box"></div> -->
1070 <div class="box box1">
1071 </div>
1072 <div class="box box2">
1073 </div>
1074 <div class="box box3">
1075 </div>
1076 <div class="box box4">
1077 <div class="shBl"><!-- 左下角阴影 --></div>
1078 <div class="shBr"><!-- 右下角阴影 --></div>
1079 </div>
1080 <div class="box box5">
1081 <div class="shBl"><!--左下角阴影 --></div>
1082 <div class="shBlFlod"><!-- 左下角折角 --></div>
1083 </div>
1084 <div class="box box6">
1085 <div class="cornerLf"><!-- 实现左上角效果 --></div>
1086 <div class="cornerRt"><!-- 实现右上角效果 --></div>
1087 </div>
1088 <div class="box box7">
1089 </div>
1090 <div class="box box8">
1091 </div>
1092 <div class="box box9">
1093 </div>
1094 <div class="box box10">
1095 </div>
1096 <div class="box box11">
1097 <div class="ribbon"><!-- 透明胶带效果 --></div>
1098 </div>
1099 <div class="box box12">
1100 <div class="shBl"><!--左下角阴影 --></div>
1101 <div class="shBlFlod"><!-- 左下角折角 --></div>
1102 <div class="ribbon"><!-- 透明胶带效果 --></div>
1103 </div>
1104 <div class="box box13">
1105 <div class="cornerLf"></div>
1106 <div class="cornerRt"></div>
1107 <div class="ribbon"></div>
1108 </div>
1109 <div class="box box14"><div class="ribbon"></div></div>
1110 <div class="box box15"><div class="ribbon"></div></div>
1111 </body>
1112 </html>
