美工们在设计漂亮的页面时,常常会采用一种阴影边框的效果。如图:

一般做法我们会将阴影框上下多扩展一些长度再切出来,使用right,bottom的背景定位(background-position)。
但是使用这样子的背景图在扩展上难免有些不足,定位上,也比较麻烦,并且为了这么一点点的效果,需要使用这么大的一张背景图,难免有些违逆我们偏嗜精简的心。
另外还有一种洋葱皮阴影做法,这种做法应该是切三张图。相对前面的做法就是不用切一张很大的图,且扩展性很好。但牺牲的是需要多添加二个层来放置背景。这种方法我是敬而远之的。
推翻了前面的几种做法,就此隆重推荐我们这种position定位法。
首先我们需要的多包容一个层(怎么这时候又不违逆你的心了。。。不好意思,虽然要多一个层,但我还是认为这么做精简,起码省却了美工们去切图了)
(全文…)