标签归档:box-shadow

CSS3中box-shadow的性能问题

在对主题评论列表处理的过程中,突然发现嵌套回复性能低下,页面拖动也一卡一卡的。排除法后锁定了目标——box-shadow。

于是做了一些实验,发现如果大量使用box-shadow,又或者容器比较大的时候,性能都会降低很多。如果容器不是很大,数量不是很多,倒没多大的感觉。

如果将box-shadow应用到评论列表中,这个问题就比较明显了,特别是在评论不分页、支持嵌套的情况下。

无论是Firefox还是Chrome,对box-shadow的支持都存在这个问题,Opera则好上很多,带来的迟滞感不是很强。

模仿评论列表小小地做了一个Demo,可以体验到带box-shadow和不带box-shadow的明显区别。

更极端的一个Demo

Firefox Box-shadow & Outline bug

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>

继续阅读

CSS3 box-shadow

属性如下:

box-shadow:阴影类型 X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色

网上关于这个的教程很多,随便搜搜都有,不过看过之后最好实践一下,我这里就不说教程了,贴张图看看:

box-shadow

box-shadow

提醒一下的是不能直接对图片使用inset(内阴影)效果,昨晚我在这里纠结了好久好久。

然后放上个Demo(IE就不用尝试了,嗯,有IE 9的可以看看如何。如果看到乱码,在浏览器中将编码改为utf8即可)。

最后是一点参考资料:

  1. CSS3属性box-shadow使用教程(关于多重阴影部分有误,正确用法可参考我的Demo)
  2. The ‘box-shadow’ property