CSS3中的box-shadow这个属性可以给盒子加上投影效果，在默认情况下outset的。也就是说边框在盒子外面，并且不占用盒子的布局空间。那么这就产生了问题，如果盒子紧挨着容器，而容器设置有overflow:hidden属性不就会把投影效果截断了吗？
对，容器会截断投影效果！
<style>
body {font:14px/32px 微软雅黑;}
div {overflow:hidden;float:left;}
span {box-shadow:0px 0px 5px #CCC;display:inline-block;}
</style>
<div>
<span>诶？我的投影效果哪儿去了？</span>
</div>
这个情况就是span上设置的投影效果被div上的overflow:hidden切掉了，那么如何让它不切掉呢？这很容易，只要span不紧挨着div就不会被切掉了嘛，我们可以给div加个padding:5px，让span和div之间有5px的空间用来渲染投影，但是加padding的话div的宽度会增加吧？我们当然不能破坏原来的布局，因此不能让宽度增加，或者至少不能让常规流的行空间减少。于是在加了padding的同时使用负margin来消耗掉padding增加的空间。
<style>
body {font:14px/32px 微软雅黑;}
div {overflow:hidden;float:left;padding:5px;margin:-5px;}
span {box-shadow:0px 0px 5px #CCC;display:inline-block;}
</style>
<div>
<span>呜咕～ 投影效果出现啦～</span>
</div>
这样就既解决了投影被切掉的问题，也不会影响到常规流的布局了。
