1 <!DOCTYPE> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>MaterialDesignCard</title> 6 <style> 7 body { 8 background: #e2e1e0; 9 text-align: center; 10 } 11 12 .card { 13 background: #fff; 14 border-radius: 10px; 15 display: inline-block; 16 height: 300px; 17 margin: 1rem; 18 position: relative; 19 width: 300px; 20 } 21 22 .card-1 { 23 box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 24 transition: all 0.3s cubic-bezier(.25,.8,.25,1); 25 } 26 27 .card-1:hover { 28 box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 29 } 30 31 .card-2 { 32 box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 33 } 34 35 .card-3 { 36 box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 37 } 38 39 .card-4 { 40 box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 41 } 42 43 .card-5 { 44 box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); 45 } 46 47 </style> 48 </head> 49 <body> 50 <div class="card">card</div> 51 <div class="card card-1">card1</div> 52 <div class="card card-2">card2</div> 53 <div class="card card-3">card3</div> 54 <div class="card card-4">card4</div> 55 <div class="card card-5">card5</div> 56 </body> 57 </html>
原文：http://www.cnblogs.com/maoguy/p/7978544.html