事情是这样的：
小DB接到需求后，开始撸代码了。。。
于是就有下面的一坨代码：
<style> .list-item{ box-shadow: 10px 10px 100px rgba(0, 0, 0,.5); } </style>
于是小DB回复了
第二天。。。。你们猜发生了什么，啊哈哈哈哈哈哈，小DB被骂的狗血淋头。
没错，效果是实现了，但是在客户反应页面的移动端打开太卡，加载太慢。。。
小DB:卧草？难道我使用的姿势不对？除了这样写我还有怎样？css3这么坑...于是小DB通过chrome performance profile 调试前后对比了一下 加了阴影后的 Painting 耗时明显过高。这应该就是导致页面卡渲染时间过长的根本原因。
解决办法：将阴影设置在对应元素的伪类上，如下：
<style> .list-item{ ..... position:relative; } .list-item:after{ content:""; box-shadow: 10px 10px 100px rgba(0, 0, 0,.5); position: absolute; width: 100%; height: 100%; left: 0; top:0; } </style>
完美解决。哈哈哈。
以上案例是我亲身经历过，当时页面运行一个大的android大屏上，硬件配置比较低，样式又要求好看，于是摸索出来了这么个玩意儿。后来的项目中，从来不会把box-shadow 背景渐变这些样式直接写到元素本身上面，换而采用 :before or :after来实现。
不光是css3, canvas的相关api涉及到阴影，渐变这些，渲染过多，也会有性能问题，各位请慎用。
最后希望我经验分享能够帮助到大家。
,
