阴影的变化

这个是转载的，当时看见就觉得挺有意思

ul.box li {list-style-type:none;margin:20px 10px;padding: 0;width: 300px;height: 220px;border: 2px solid#efefef;position: relative;float: left;background: #ffffff; /* old browsers*/line-height:220px;font-size:32px;text-align:center;

-webkit-box-shadow: 0 1px4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;

-moz-box-shadow: 0 1px 4pxrgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;

-o-box-shadow: 0 1px 4pxrgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;

box-shadow: 0 1px 4pxrgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;}

ul.box li:before { z-index:-2;  position: absolute; background:transparent; width: 80%; height: 70%; content: ''; left: 20px; bottom:8px;

-webkit-transform:skew(-12deg) rotate(-4deg);

-moz-transform:skew(-12deg)rotate(-4deg);

-o-transform: skew(-12deg)rotate(-4deg);

-ms-transform: skew(-12deg)rotate(-4deg); 

-webkit-box-shadow: 0 8px20px rgba(0, 0, 0, 0.6);

-moz-box-shadow: 0 8px 20pxrgba(0, 0, 0, 0.6);

-o-box-shadow: 0 8px 20px rgba(0,0, 0, 0.6);

box-shadow: 0 8px 20pxrgba(0, 0, 0, 0.6); }

 ul.box li:after { z-index: -1; position:absolute; background: transparent; width: 80%; height: 70%; content: '';right:20px;  bottom:8px;

-webkit-transform:skew(12deg) rotate(4deg);

-moz-transform:skew(12deg)rotate(4deg);

-o-transform: skew(12deg)rotate(4deg);

-ms-transform: skew(12deg)rotate(4deg);

-webkit-box-shadow: 0 8px20px rgba(0, 0, 0, 0.6);

-moz-box-shadow: 0 8px 20pxrgba(0, 0, 0, 0.6);

-o-box-shadow: 0 8px 20pxrgba(0, 0, 0, 0.6);

box-shadow: 0 8px 16pxrgba(0, 0, 0, 0.6); } 

.box liimg{width:290px;height:210px;padding:5px;}