Question

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

在网络上圆角图像的最佳方法是CSS / JS，

或者：更好的做法是使用角落四舍五入的图像（通过上传代码或设计人员的手工劳动）？

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

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

Answer 1

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

或者，您也可以使用CSS做一些事情。将图像设置为div的背景图像，然后使用CSS 3 border-radius属性对div的角进行舍入以产生类似的效果。

e.g。

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的浏览器，但您确实提到跨浏览器兼容性不是问题。只是一个想法：）

Answer 2

您可以按照以下代码制作出完美的图像。

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

首先，我们使用.MyImage类（可以设置任意值）来定位图像，然后将height和width属性设置为相等（除非相等即可设置任意值），以使其成为一个完美的正方形。然后将边界半径设置为100％。

Answer 3

所有支持圆角的浏览器现在也支持图像的圆角。像Stef回答的那样，你曾经不得不使用背景图像，但这种方式要容易得多。

img {
    border-radius: 10px;
}

或

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

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

这取决于你想要的向后兼容性。如果您使用背景图像方法兼容，您仍然会遗漏一大堆不支持边框半径的旧浏览器，即使使用前缀也是如此，因此您也可以将角落作为图像的一部分。 / p>

希望有所帮助：）

Answer 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;
}

最佳实践在网络上圆角图像

4 个答案: