网络上的最佳实践圆角图像答案

【问题标题】：Best practice rounded corner images on the web网络上的最佳实践圆角图像
【发布时间】：2012-05-18 21:29:17
【问题描述】：

假设可以找到合适的解决方案（不需要跨浏览器等）-

在网络上对图像进行圆角处理的最佳方法是 CSS/JS，

或者：使用圆角的图像是更好的做法吗（通过上传代码或设计师的手工劳动）？

如果可用，如何舍入元素 - css 与圆角图像（例如精灵）？

编辑我知道 CSS 是可能的，但我认为它使浏览器工作起来比仅仅下载预编辑的图像更难（这在服务器端会花费更多的精力）。问题不是什么有效，而是什么更好。

【问题讨论】：

标签： javascript css image

【解决方案1】：

您可以简单地创建带有圆角的图像，但这当然会首先增加生成图像的时间和复杂性。

或者，您也可以只使用 CSS 来做一些事情。将图像设置为 div 的背景图像，然后使用 CSS 3 border-radius 属性对 div 的角进行圆角处理，以提供类似的效果。

例如

div {
    background-image: url(myimage.jpg);
    width: 375px;
    height: 500px;
    border: 2px solid #666;
    border-radius: 40px;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    }

这仅适用于支持 CSS 3 的浏览器，但您确实提到跨浏览器兼容性不是问题。只是一个想法:)

【讨论】：

我知道它有效，只是想弄清楚生成圆形图像是否会更好。浏览器对 css 的工作有多难？
@JNF 如果您的意思是 CSS 解决方案比图像解决方案花费更多的能量，这不应该是您的问题。这种幅度的性能提升是微不足道的。即使不是，您也应该在影响质量/可维护性/等之前拥有真实的数据和基准。性能。
@Sprague，是的，这就是问题所在。而且——是吗？
@JNF 我不知道，最好的做法是使用 CSS。我认为你很难找到这方面的基准，但如果你这样做了，请发布它们！

【解决方案2】：

您可以按照此代码使图像完美圆润。

.MyImage {
  height: 200px;
  width: 200px;
  border-radius: 100%;
}

首先我们使用 .MyImage 类来定位图像（你可以设置任何你想要的），然后我们设置 height 和 width 属性相等（你可以设置任何你想要的，除非它相等），这样它就变成了一个完美的正方形。然后将border-radius设置为100%。

【讨论】：

【解决方案3】：

所有支持圆角的浏览器现在也支持图像本身的圆角。就像 Stef 回答的那样，您过去必须使用背景图片，但这种方式要容易得多。

img {
    border-radius: 10px;
}

或

img {
    border-radius: 10px 5px 10px 2px;
}

在 Safari、Firefox、Chrome 甚至 ie9 的最新版本中，边框半径现在可以在没有前缀的情况下完全正常工作。

这取决于我猜你想要的向后兼容程度。如果你使用背景图片的方法来兼容，你仍然会遗漏一大堆不支持边框半径的旧浏览器，即使有前缀，所以你真的不如把角落变成图片的一部分。

希望有帮助:)

【讨论】：

【解决方案4】：

这只是一个额外的，用于跨浏览器：

img {
    border-radius: 10px 10px 10px 10px;
    -o-border-radius: 10px 10px 10px 10px;
    -ms-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
}

【讨论】：