滤镜 带阴影效果窗口最常见和方便的方法是使用滤镜，可以直接定义，但仅局限于IE环境使用。

其次是使用阴影图片做偏移背景图实现，兼容性很好。

阴影可以看作一种平滑的色阶过渡，由深到浅。于是我们可以采用多层覆盖模拟这种过度。这种方法只是在技术角度模拟出滤镜效果，纯/实现，兼容IIE6和FF1.5，最终效果图：

绝对定位定义1个容器：#content { position:absolute; top:135px; left:40px; width:170px; height:295px; padding:10px; border:1px solid #000; background-color:#fafafa; z-index:7;}
定义5个层，色阶依次为 #999 #aaa #ccc #ddd #eee，按照固定偏移量1px计算好定位位置：#shadow1 { position:absolute; top:137px; left:42px; width:190px; height:315px; border-top:0; border-right:1px solid #999; border-bottom:1px solid #999; border-left:0; z-index:6;}
#shadow2 { position:bsolute; top:138px; left:43px; width:190px; height:315px; border-top:0; border-right:1px solid #aaa; border-bottom:1px solid #aaa; border-left:0; z-index:5;}
#shadow3 { position:absolute; top:139px; left:44px; width:190px; height:315px; border-top:0; border-right:1px solid #ccc; border-bottom:1px solid #ccc; border-left:0; z-index:4;}
#shadow4 { position:absolute; top:140px; left:45px; width:190px; height:315px; border-top:0; border-right:1px solid #ddd; border-bottom:1px solid #ddd; border-left:0; z-index:3;}
#shadow5 { position:absolute; top:142px; left:47px; width:189px; height:314px; border-top:0; border-right:1px solid #eee; order-bottom:1px solid #eee; border-left:0; z-index:2;}
调用后会得到如下结果：


效果演示：

实现2个阴影层更麻烦一些，因为阴影交叉的区域有一个层优先级的关系，需要新定义，比较复杂，这是第2个容器：#content2 { position:absolute; top:90px; left:100px; width:220px; height:300px; padding:10px; border:1px solid #000; background-color:#fff; z-index:13;}
同样的原理实现如下，具体代码请参考效果演示：


效果演示：

如果要想相对定位实现，必须经过更复杂的定位计算，实际使用也有限不做讨论。其他色彩阴影同理，只要配好色彩的色阶就可以。

这个效果和传统滤镜实现还是有差别的，项目使用还是建议图片模拟。

Referrence
Shadow Demo