CSS 单边 inner box shadow

CSS3的box-shadow效果，想来大家可能并不陌生，但是一般我们用向外的shadow效果比较多，如果希望得到向内部的阴影效果，怎么实现呢？

很容易，就是加上inset：

.side-shadow {
    -webkit-box-shadow: inset 0 -3px 10px -3px #666666;
       -moz-box-shadow: inset 0 -3px 10px -3px #666666;
            box-shadow: inset 0 -3px 10px -3px #666666;
}

以上的例子中，我们把spread（即最后一个参数）的半径设置为了-3px，这会将阴影挤到一边，所以效果将会是这样：

这样的效果可以用于导航栏，凸显出3D效果，是不是很简单呢？