边框阴影

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>drop-shadows</title>    
  6     <style>
  7         body {
  8             padding: 20px 0 0;
  9             font: 14px/1.5 Arial, sans-serif;
 10             text-align: center;
 11             color: #333;
 12             background: #ccc;
 13         }
 14         
 15         .drop-shadow {
 16             position: relative;
 17             width: 45%;    
 18             padding: 1em; 
 19             margin: 2em auto 5em; 
 20             background: #fff;
 21             box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 22         }
 23 
 24         .drop-shadow:before,
 25         .drop-shadow:after {
 26             content: "";
 27             position: absolute; 
 28             z-index: -2;
 29             bottom: 15px;
 30             left: 10px;
 31             width: 50%;
 32             height: 20%;
 33         }
 34 
 35         .drop-shadow:after {                 
 36             right: 10px; 
 37             left: auto;
 38         }
 39         
 40         .round {
 41             border-radius: 4px;
 42         }
 43         
 44         .round:before,
 45         .round:after { 
 46             max-width: 300px;
 47             box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
 48             transform: rotate(-3deg);
 49         }
 50         
 51         .round:after {
 52             transform: rotate(3deg);
 53         }
 54         
 55         .curls {
 56             border: 1px solid #efefef;   
 57             border-radius: 0 0 120px 120px / 0 0 6px 6px;
 58         }
 59       
 60         .curls:before,
 61         .curls:after { 
 62             bottom: 12px;
 63             max-width: 200px;
 64             height: 55%;
 65             box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
 66             transform: skew(-8deg) rotate(-4deg);
 67         } 
 68       
 69         .curls:after {
 70             transform: skew(8deg) rotate(4deg);
 71         }
 72         
 73         .perspective:before {
 74             left: 28px;
 75             bottom: 8px;
 76             max-width: 200px;
 77             height: 35%;
 78             box-shadow: -60px 5px 8px rgba(0, 0, 0, 0.4);
 79             transform: skew(50deg);
 80         }
 81         
 82         .perspective:after {
 83             display: none;
 84         }
 85         
 86         .raised:before {
 87             width: auto;
 88             right: 10px;
 89             left: 10px;
 90             bottom: 0;
 91             box-shadow: 0 8px 10px rgba(0, 0, 0, 0.5);
 92         }
 93         
 94         .rotated {
 95             transform: rotate(-3deg);
 96         }
 97         
 98         .rotated *:first-child:before {
 99             content: "";
100             position: absolute;
101             z-index: -1;
102             top: 0;
103             bottom: 0;
104             left: 0;
105             right: 0;
106             background: #fff;
107             box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
108         }
109         
110     </style>
111 </head>
112 <body>
113 
114     <div class="drop-shadow round">
115         <h1>CSS drop-shadows without images</h1>
116         <p>No extra markup, fluid, all modern browsers</p>
117     </div>
118     
119     <div class="drop-shadow curls">
120         <h1>Some curls</h1>
121         <p>No extra markup, all modern browsers</p>
122     </div>
123     
124     <div class="drop-shadow perspective">
125         <h1>Some perspective</h1>
126         <p>No extra markup, all modern browsers</p>
127     </div>
128     
129     <div class="drop-shadow raised">
130         <h1>Raised box</h1>
131         <p>No extra markup, all modern browsers</p>
132     </div>
133     
134     <div class="drop-shadow round rotated">
135         <h1>Rotated box</h1>
136         <p>No extra markup, all modern browsers. Needs a child element to work.</p>
137     </div>
138 </body>
139 </html>