1

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

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

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

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

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

4

4 回答 4

2

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

或者，您也可以只使用 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 的浏览器，但您确实提到跨浏览器兼容性不是问题。只是一个想法:)

于 2012-05-10T10:24:55.160 回答
0

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

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

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

于 2018-10-31T07:18:43.223 回答
-1

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

img {
    border-radius: 10px;
}

或者

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

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

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

希望有帮助:)

于 2012-05-10T10:35:05.503 回答
-1

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

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;
}
于 2012-06-01T11:06:25.847 回答