CSS 如何在所有浏览器中获得完美的图像边框半径？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8444645/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get perfect border radius on images in all browsers?
提问by Jitendra Vyas
Currently I'm getting like this in Chrome, Safari, Mobile Safariand Opera. edges are rough.
目前，我在Chrome、Safari、Mobile Safari和Opera 中遇到了这种情况。边缘粗糙。
img {border-radius: 10px; border:3px solid red}
See this example in Google Chromeor Operaor iPadhttp://jsfiddle.net/4PLUG/2/show/
在Google Chrome或Opera或iPad http://jsfiddle.net/4PLUG/2/show/ 中查看此示例
Borders are fine in Firefox.
Firefox 中的边框很好。
and in IE9border edges are fine but it has a different problem. it shows some space between border and images
并且在IE9 中边框边缘很好，但它有一个不同的问题。它显示了边框和图像之间的一些空间
How to get the result like Firefox in all other browser?
如何在所有其他浏览器中获得像 Firefox 一样的结果？
回答by sandeep
You can give extra div to your imgtag like this:
您可以img像这样为您的标签提供额外的 div ：
body {padding:100px}
正文 {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/
http://jsfiddle.net/4PLUG/4/
回答by Yusuf
/* just make sure you're including border radius for all browsers rendering engines */
/* 只要确保你为所有浏览器渲染引擎都包含了边框半径 */
.img-border{
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border:3px solid red;
}
回答by Kae Verens
all browsers have different CSS?capabilities, and handle them differently.
所有浏览器都有不同的 CSS 功能，并以不同的方式处理它们。
if you want the corners to look exactly the same in all browsers, you'll just have to put the curves in the actual image, and not rely on CSS.
如果您希望角在所有浏览器中看起来完全相同，您只需将曲线放在实际图像中，而不是依赖 CSS。
An alternative is to use a background image on a div instead, which may get better clipping.
另一种方法是在 div 上使用背景图像，这可能会得到更好的剪辑。
回答by Dennis Jamin
You might want to try wrapping the images in a block element and floating 4 divs in all four corners with border images as a background. Make sure the image itself has an border as well, this makes using radius borders in images quite a lot easier if you have more than one size of images that needs 'm.
您可能想尝试将图像包装在一个块元素中，并在所有四个角上浮动 4 个 div，边框图像作为背景。确保图像本身也有边框，如果您有不止一种尺寸的图像需要 'm.
回答by Christopher Marshall
I've done this effect with two divs using z-index.
我已经使用 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 -->
Set your background image on mask to the red borders with the middle cut out (png), then use z-index to stack it above the picture div.
将蒙版上的背景图像设置为带有中间切口 (png) 的红色边框，然后使用 z-index 将其堆叠在图片 div 上方。
Should work cross browser, the only thing is it doesn't account for dynamic widths/height in the images, it assumes all images are the same. AND you're doing a request for that extra mask image.
应该跨浏览器工作，唯一的问题是它不考虑图像中的动态宽度/高度，它假设所有图像都相同。并且您正在请求该额外的蒙版图像。
Up to you.
由你决定。
回答by mina morsali
for img tags , percent border radius work perfectly:
对于 img 标签，百分比边框半径完美地工作：
.roundcornerimg{border-radius: 50%;}
<img src='imageurl' class='roundcornerimg'/>
回答by Robin J
link the image in the body:
链接正文中的图像：
<img src="image.jpg">
add your sizing to the image:
将您的尺寸添加到图像中：
<img src="image.jpg" width="100%" height="30%">
Then add in the inline CSS.
然后添加内联 CSS。
<img src="image.jpg" width="100%" height="30%" style ="border:solid thick black;border-radius="25px">
By adding in the inline CSS, the border and border radius will take effect on the image. Just dont style this particular image in the stylesheet because specificity may mess with the inline CSS.
通过在 inline 中添加CSS，边框和边框半径将对图像生效。只是不要在样式表中设置此特定图像的样式，因为特异性可能会与 inline 混淆CSS。
