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

Best practice rounded corner images on the web

本文关键字：最佳 图像 圆角 网络      更新时间：2023-09-26

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

在

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

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

如果可用，圆角元素 - css 与圆角图像（例如精灵）怎么样？

编辑

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

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

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

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

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

首先，我们使用 .MyImage 类（您可以设置任何您想要的内容），然后我们将高度和宽度属性设置为相等（您可以设置任何您想要的属性，除非它相等），以便它成为一个完美的正方形。然后将边框半径设置为 100%。

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

img {
    border-radius: 10px;
}

或

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

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

我猜这取决于你想向后兼容的程度。如果您使用背景图像方法进行兼容，您仍然会遗漏大量不支持边框半径的旧浏览器，即使有前缀，您也真的可以让角成为图像的一部分。

希望对:)有所帮助

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

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;
}
相关文章：