如何在所有浏览器的图像上获得完美的边界半径？ [英] How to get perfect border radius on images in all browsers?

问题描述

目前，我在 Chrome ， Safari ，移动Safari 和 Opera

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

请参阅 Google Chrome strong>或 iPad

Currently I'm getting like this in Chrome, Safari, Mobile Safari and Opera. edges are rough.

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

See this example in Google Chrome or Opera or iPad http://jsfiddle.net/4PLUG/2/show/

Borders are fine in Firefox.

and in IE9 border edges are fine but it has a different problem. it shows some space between border and images

How to get the result like Firefox in all other browser?

解决方案

You can give extra div to your img tag like this:

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/

这篇关于如何在所有浏览器的图像上获得完美的边界半径？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！