CSS3 变换旋转与使用图像

Question

我正在开发一个使用对 Angular 对齐图像的网站。这些图像相当简单，里面有一些文本，所以我可以使用图像或 CSS3 transform:rotate 和 border-radius 属性来实现效果，当然，所有的专有扩展。

但是我想知道使用其中一种是否比另一种有显着的优势。我想也许纯 CSS 替代方案加载速度会更快，但缺点是每个图像使用更多代码。尽管使用图像，我仍然需要对每个元素进行大量定位。另外，第一种情况下的 CSS 不会使用特定于浏览器的扩展进行验证，如果我仍然确保网站在大多数浏览器中正确显示，这有多重要？

有使用这些选项之一的通用方法吗？您会推荐什么？

Answer 1

与图像相比，使用 CSS3 的最佳答案是您需要支持 Internet Explorer(或其他较旧的浏览器或不支持 CSS3 的浏览器):如果您的大部分用户群用IE浏览就应该使用图片。

如果您只对后来的、更符合标准的浏览器感兴趣(可能包括 IE9，但我还没有使用它的经验)，那么 CSS 3 可能是更好的选择，因为它可能涉及更大的CSS 文件，但它确实允许您将来更轻松地切换布局，而无需为新设计创建/重新创建一组新图像。

当然，您可以结合使用这两种方法:对兼容的浏览器使用 CSS 3，但包含 IE 特定的样式表，其中 conditional comments ，提供图像作为背景图像来构 build 计。当然，这可能需要大量工作。