[分享]css3投影两边一样多

CSS3中的投影效果非常有趣。其中之一是两边一样多的投影效果。

.box{
   box-shadow: 20px 20px 0px -10px #333, 
               -20px -20px 0px -10px #333;
} 

上面的代码中，第一组投影向右下方偏移20px，向右下方增加的距离也是20px，阴影的模糊半径为0px，阴影大小是负值-10px。模糊半径为0表示阴影边缘非常的锐利。阴影大小的负值表示阴影在盒子内部，造成了向上移动的效果。

第二组投影与第一组投影类似，只是偏移方向相反。这样就得到了两边一样多的投影效果。

需要注意的是，阴影顺序是有很大影响的。第一组阴影会覆盖第二组，所以需要将第一组阴影设置在第二组阴影的后面。

理解了这个特性，你就可以为你的盒子添加独特的投影效果了!