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

目前，我在Chrome、Safari、Mobile Safari和Opera中都遇到了这种情况。边缘粗糙

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

请参见谷歌Chrome或Opera或iPad

Firefox中的边框很好

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

---

如何在所有其他浏览器中像Firefox一样获得结果？

所有浏览器都有不同的CSS功能，并且处理方式也不同

如果您希望所有浏览器中的角点看起来完全相同，那么只需将曲线放入实际图像中，而不必依赖CSS

---

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

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

/*只需确保为所有浏览器渲染引擎包括边框半径*/

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

---

您可以给您的

img

标记额外的div，如下所示：

正文{填充：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;
}

---

我已经用两个div使用z-index实现了这个效果

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

将遮罩上的背景图像设置为带有中间剪切（png）的红色边框，然后使用z索引将其堆叠在图片div上方

如果跨浏览器工作，唯一的问题是它不考虑图像中的动态宽度/高度，它假定所有图像都相同。你正在请求额外的蒙版图像

---

取决于您。

对于img标签，边界半径百分比非常有效：

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

.roundcornerimg{边界半径：50%；}

链接正文中的图像：

<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

直接向图像添加边框半径并不是我们目前使用的浏览器版本的最佳解决方案，你可能会更幸运地在它周围包装另一个元素，并在该元素上设置你的边界半径。Google Chrome正在不断升级浏览器，但为什么他们不考虑这个问题呢。我想可能是因为Webkit渲染引擎或溢出：隐藏和负边距的问题。@kae-我不能在背景中使用图像，因为在我目前的情况下，图像是内容的一部分，不用于装饰。因此，我认为在另一个元素中包装

img

是目前的诀窍。虽然我将不得不添加一个不必要的标签，只是为了使样式正确。所有最新的浏览器版本都不需要供应商前缀。实际上，包装图像是完全不必要的。优素福的答案适用于所有浏览器