CSS - 优化圆角以提高速度

Question

我正在尝试优化我的网站以提高速度。之前我使用过圆角的图像，但现在我用border-radius和-moz-border-radius css规则更改了它们。哪种方式最适合速度？我曾经认为css规则更快，但我看到很多网站都在讨论css精灵，现在我有点困惑。哦，我不关心IE兼容性，所以你可以建议任何你想要的方法。

Answer 1

速度如下：CSS＆gt;精灵＆gt;单独的图像。 精灵是指使用单个图像并使用CSS切片/定位角落而不是单独的角落图像。它比较胖，因为你只下载了一张图像。 CSS是最快的，因为它不需要下载任何东西。

Answer 2

对于那些支持radius CSS属性的浏览器，请使用这些属性。它们肯定更快，因为不需要加载图像，它们可以由浏览器的本机引擎呈现。

对于那些没有的浏览器，应用基于图像的解决方法。

但是，不要过分担心这些东西。通过该领域的优化可以达到的速度提升是非常非常小的。

Answer 3

两者完全相同，只是因为CSS3规范尚未最终确定，Mozilla使用border-radius供应商前缀实现了-moz-。你需要它，并且圆角的-webkit-版本可以在Webkit（Chrome，Safari）和Mozilla（Firefox）浏览器上运行。

至于速度..目前还不清楚你是在谈论转移还是渲染速度。在任何一种情况下，我都会建议差异可以忽略不计，你应该使用全部三个来获得最大的浏览器支持（当然，减去IE）

Answer 4

我会推荐CSS Sprites。这是一个很好的教程：http://bavotasan.com/tutorials/simple-rounded-corners-with-a-css-sprite/