我正在尝试优化我的网站速度。之前我使用图片来实现圆角，但现在我已经改用了border-radius和-moz-border-radius CSS规则。哪种方法对于速度来说更好呢？我曾经认为CSS规则更快，但我看到很多网站都在谈论CSS Sprites，现在有点困惑了。哦，我不关心IE的兼容性，所以你可以建议任何方法。
4个回答
4
速度从快到慢分别是：CSS > 精灵图 > 单独图片。精灵图是指使用单张图片并通过CSS切割/定位代替分开的角落图片。它更快，因为只需要下载一张图片。CSS最快，因为不需要下载任何东西。
- Radomir Dopieralski
1
对于支持radiusCSS属性的浏览器，请使用它们。它们肯定更快，因为不需要加载任何图像，并且可以由浏览器的本地引擎呈现。
对于那些不支持（较老的）浏览器，请应用基于图像的解决方法。
不过，不要太担心这些东西。通过在此领域进行优化可实现的速度提升非常非常微小。
- Pekka
0
两者完全相同，只是因为CSS3规范尚未最终确定，Mozilla使用-moz-供应商前缀实现了border-radius。您需要这个前缀以及-webkit-版本才能在Webkit（Chrome，Safari）和Mozilla（Firefox）浏览器上实现圆角。
至于速度...不清楚您是否在谈论传输或渲染速度。无论哪种情况，我建议您使用所有三种方法以获得最大的浏览器支持（当然不包括IE）。
- Yi Jiang
2
1两者都是什么？使用图像和使用CSS吗？我不这么认为。 - Radomir Dopieralski
@Radomir，应该更明确地说明
border-radius和-moz-border-radius。 - Yi Jiang0
我建议使用CSS Sprites。这是一个很好的教程: http://bavotasan.com/tutorials/simple-rounded-corners-with-a-css-sprite/
- fredley
2
1精灵比使用单独的图像更好，但如果您可以使用内置的浏览器功能完全完成相同的事情，为什么要使用图像呢？当然，如果您需要一些特殊形状的角落，而不仅仅是圆角，则必须使用图像，然后精灵就是正确的选择。 - Radomir Dopieralski
兼容性？我想这取决于你的目标受众。 - fredley
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
-webkit-border-radius来兼容 Chrome/Safari。 - josh3736