5

在我开始第一次测试以使用 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 中多次出现 box-shadow 插图，如果有人可以给我一个提示，我必须改进已经批准的布局 - 删除 box-shadow 插图。

4

3 回答 3

7

毕竟我发现了另一种使用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/

但是有限制 - 我不能使用边界半径，我需要在容器类 .overlay 中使用另一个 DIV，但解决了我的大部分问题。

于 2013-05-12T14:23:42.680 回答
0

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

于 2013-05-12T07:22:00.990 回答
-5

您可以使用 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>
于 2013-05-13T08:39:11.240 回答