CSS3 box-shadow插入痛苦的性能杀手

Question

在我开始第一次测试以使用Awesomium(对于Visual Studio 2010)部署桌面可执行文件时,经过几个小时调试我的应用程序后,我在webkit中看到了很多渲染问题,因为在输入时缓慢重绘和非常慢的IO.起初我认为这是因为缓冲的Process API无法使用或在进程IO缓冲方面存在任何问题.

之后,我使用Qt-Webkit(再次使用Visual Studio 2010 SDK)开始使用Qt5的新项目,我的表现最差.

毕竟,我在Tide(Webkit/Linux)上从头开始了另一个项目 - 我正在逐个文件地添加文件并分析应用程序的行为.

然后我看到应用程序可以在低CPU使用率和index.htm上使用60 FPS运行.

因此,在我将原始应用程序中的所有JavaScript文件放入此新项目后,他没有更改帧速率.但是当我把包含Class的CSS放在应用程序下面时,刚开始消耗100%的CPU并且帧速率刚下降到~10 FPS.

.overlay { 
    padding:30px 15px;
    background:#fff;
    background-color: #CCCCCC;
    background-image: -moz-linear-gradient(#F5F5F5, #CCCCCC);
    -webkit-box-shadow:0 5px 10px -10px rgba(0,0,0,0.50),0 1px 4px rgba(0,0,0,0.30),0 0 40px rgba(0,0,0,0.10) inset;
    -moz-box-shadow:0 5px 10px -10px rgba(0,0,0,0.50),0 1px 4px rgba(0,0,0,0.30),0 0 40px rgba(0,0,0,0.10) inset;
    box-shadow:0 5px 10px -10px rgba(0,0,0,0.50),0 1px 4px rgba(0,0,0,0.30),0 0 40px rgba(0,0,0,0.10) inset;
}

示例: http ://jsfiddle.net/7BWAW/1/

我怎样才能重写这个类,更准确地说,如何在不使用box-shadow插入的情况下重写这个类？

我尝试使用透明的PNG作为背景而没有运气,但到目前为止,轮廓并不相似.

由于该项目在CSS中出现了多次框阴影,如果有人能给我一个亮点,我必须改进已经批准的布局 - 删除框阴影插图.

Answer 1

毕竟我发现了另一种使用border-image的技术

.overlay { 
    border:30px solid transparent;
    -webkit-border-image:url(http://s22.postimg.org/5blh30bkd/overlay_border.png) 30 30 stretch; /* Safari 5 and older */
    -o-border-image:url(http://s22.postimg.org/5blh30bkd/overlay_border.png) 30 30 stretch; /* Opera */
    border-image:url(http://s22.postimg.org/5blh30bkd/overlay_border.png) 30 30 stretch;
}

请参阅小提琴解决方案: http ://jsfiddle.net/7BWAW/3/

但有限制 - 我不能使用border-radius,我需要在容器Class .overlay中使用另一个DIV,但解决了我的大部分问题.