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/

如何重写此类，更准确地说，如何在没有框阴影插入的情况下重写此类？

我尝试使用透明的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，但是解决了我的大部分问题。

Answer 2

之前我遇到过这个问题，解决办法是停止使用阴影，并使用小尺寸的小图片在你的盒子周围制作阴影。

Answer 3

你可以用css和div写这样的东西：

<table>
    <tr>
        <td style="width:5px;heigth:5px"><img src="top-left-corner.png"></img></td>
        <td></td>
        <td style="width:5px;heigth:5px"><img src="top-right-corner.png"></img></td>
    </tr>
    <tr>
        <td style="background-image:url('body-left.png');background-repeat:repeat-y;"></td>
        <td>
            Contet of the box
        </td>
        <td style="background-image:url('body-left.png');background-repeat:repeat-y;"></td>
    </tr>
    <tr>
        <td style="width:5px;heigth:5px"><img src="bottom-left-corner.png"></img></td>
        <td></td>
        <td style="width:5px;heigth:5px"><img src="bottom-right-corner.png"></img></td>
    </tr>
</table>

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

3 个答案: