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>纯css实现MaterialDesign的card
原文地址：http://www.cnblogs.com/maoguy/p/7978544.html