写一个小例子，给一个盒子添加一个翘边的阴影
大概就是这样，代码如下
<style type="text/css"> .box { display: inline-block; *display: inline; width: 200px; height: 248px; margin: 20px; background-color: #fff; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 8px rgba(0, 0, 0, 0.06); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 8px rgba(0, 0, 0, 0.06); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 8px rgba(0, 0, 0, 0.06); position: relative; *zoom: 1; } .box:before { -webkit-transform: skew(-15deg) rotate(-6deg); -moz-transform: skew(-15deg) rotate(-6deg); transform: skew(-15deg) rotate(-6deg); left: 15px; } .box:after { -webkit-transform: skew(15deg) rotate(6deg); -moz-transform: skew(15deg) rotate(6deg); transform: skew(15deg) rotate(6deg); right: 15px; } .box:before, .box:after { width: 70%; height: 55%; content: ‘ ‘; -webkit-box-shadow: 0 16px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 16px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 16px 8px rgba(0, 0, 0, 0.3); position: absolute; bottom: 10px; z-index: -1; } </style> <div class="box"></div>
具体实现原理，就是给.box添加两个旋转的盒子，再给添加的两个盒子添加阴影
先粘一个他的属性
如果有三个值的话，就省略了blur这个值了，我以前知道的box-shadow只有一个值，其实，可以跟很多值，多重阴影
img{box-shadow:-10px 0 10px red,
10px 0 10px blue,
0 -10px 10px yellow,
0 10px 10px green;}
显示的效果是，左边阴影红色（因为他的x轴是-10），右边是蓝色（因为他的x轴是10），上面是黄色（因为他的Y轴是-10），下边是绿色（因为他的Y轴是10）
另外当给同一个元素使用多个阴影属性时，需要注意它的顺序，最先写的阴影将显示在最顶层。
原文：http://www.cnblogs.com/change-oneself/p/4921484.html