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

Question

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

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

在 Google Chrome 或 Opera 或 iPad 中查看此示例 http://jsfiddle.net/4PLUG/2/show/

边框在 Firefox 中没有问题。

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

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

Answer 1

你可以像这样给你的 img 标签额外的 div:

正文 {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/