在对主题评论列表处理的过程中，突然发现嵌套回复性能低下，页面拖动也一卡一卡的。排除法后锁定了目标——box-shadow。
于是做了一些实验，发现如果大量使用box-shadow，又或者容器比较大的时候，性能都会降低很多。如果容器不是很大，数量不是很多，倒没多大的感觉。
如果将box-shadow应用到评论列表中，这个问题就比较明显了，特别是在评论不分页、支持嵌套的情况下。
无论是Firefox还是Chrome，对box-shadow的支持都存在这个问题，Opera则好上很多，带来的迟滞感不是很强。
模仿评论列表小小地做了一个Demo，可以体验到带box-shadow和不带box-shadow的明显区别。
Firefox同时使用outline和boxshadow时会出现outline被shadow撑开的bug，Chrome、Opera不存在此问题。
如以下代码：
<style type="text/css">
#ffbug{
margin:30px auto;
width:200px;
height:200px;
border:2px solid blue;
outline:5px dotted green;
box-shadow: 0 0 10px red;
-moz-box-shadow: 0 0 10px red;
-webkit-box-shadow: 0 0 10px red;
}
</style>
<div id="ffbug">
蓝色为border<br />
绿色为outline<br />
红色为box-shadow<br /><br />
Firefox会将box-shadow的宽度计算进width中，从而导致border变化，于是outline偏移。
</div>
属性如下：
box-shadow:阴影类型 X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色
网上关于这个的教程很多，随便搜搜都有，不过看过之后最好实践一下，我这里就不说教程了，贴张图看看：
提醒一下的是不能直接对图片使用inset（内阴影）效果，昨晚我在这里纠结了好久好久。
然后放上个Demo（IE就不用尝试了，嗯，有IE 9的可以看看如何。如果看到乱码，在浏览器中将编码改为utf8即可）。
最后是一点参考资料：