如何在所有浏览器中获得完美的图像边框半径？

Question

目前，我在 Chrome ， Safari ， Mobile Safari 和 Opera 中得到了这样的结果。边缘粗糙。

img {border-radius: 10px; border:3px solid red}

在 Google Chrome 或 Opera 或 iPad http://jsfiddle.net/4PLUG/2/show/

中查看此示例

Borders在 Firefox 中很好。

并且在 IE9 边框边缘很好，但它有一个不同的问题。它显示了边框和图像之间的一些空间

如何在所有其他浏览器中获得类似Firefox的结果？

Answer 1

您可以为img标记添加额外的div，如下所示：

body {padding：100px}

img {
   vertical-align:bottom;
    position:relative;
    z-index:-1;
}
div{
    overflow:hidden;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border:3px solid red;
    display:inline-block;
}

http://jsfiddle.net/4PLUG/4/

Answer 2

/ *只需确保所有浏览器呈现引擎的边框半径为* /

.img-border{
    border-radius:15px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border:3px solid red;
}

Answer 3

所有浏览器都有不同的CSS功能，并以不同的方式处理它们。

如果您希望角落在所有浏览器中看起来完全相同，您只需将曲线放在实际图像中，而不是依赖CSS。

另一种方法是在div上使用背景图像，这样可以获得更好的剪裁效果。

Answer 4

您可能希望尝试将图像包装在块元素中，并在所有四个角中浮动4个div，边框图像作为背景。确保图像本身也有边框，如果您有多个尺寸的图像需要“m”，这使得在图像中使用半径边框要容易得多。

Answer 5

我使用z-index使用两个div完成了这个效果。

<div class="picture-wrapper">
      <div class="mask">
      </div><!-- end mask -->
      <div class="picture">
           <img src="" />
      </div><!-- end picture -->
</div><!-- end picture-wrapper -->

将蒙版上的背景图像设置为中间切出（png）的红色边框，然后使用z-index将其叠加到图片div上方。

应该跨浏览器工作，唯一的是它不考虑图像中的动态宽度/高度，它假设所有图像都是相同的。并且你正在请求额外的掩码图像。

由你决定。

Answer 6

对于img标签，边框半径百分比完美运行：

.roundcornerimg{border-radius: 50%;}
<img src='imageurl' class='roundcornerimg'/>

Answer 7

链接身体中的图像：

<img src="image.jpg">

将尺寸添加到图像中：

<img src="image.jpg" width="100%" height="30%">

然后添加内联CSS。

<img src="image.jpg" width="100%" height="30%" style ="border:solid thick black;border-radius="25px">

通过添加内联CSS，边框和边框半径将对图像生效。只是不要在样式表中设置这个特定图像的样式，因为内联CSS的特殊性可能会混乱。