Html 圆角（边界半径）Safari 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17202128/
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
Rounded cornes (border radius) Safari issue
提问by Ivanka Todorova
.activity_rounded {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
border: 3px solid #fff;
behavior: url(css/PIE.htc);
}
<img src="img/demo/avatar_3.jpg" class="activity_rounded" alt="" />
This is my CSS & HTML. I want to make an image look like a circle. Everything works fine in IE8+, Google Chrome and Mozilla Firefox. But Safari is acting kinda strange. Here is a demo picture:
这是我的 CSS 和 HTML。我想让图像看起来像一个圆圈。在 IE8+、Google Chrome 和 Mozilla Firefox 中一切正常。但是 Safari 的表现有点奇怪。这是一个演示图片：
回答by Antony
To illustrate the problem in Safari, let's begin with a plain image.
为了说明 Safari 中的问题，让我们从一张普通图像开始。
Here we have an image of 100px x 100px. Adding a border of 3px increases the element dimensions to 106px x 106px:
这里我们有一个 100px x 100px 的图像。添加 3px 的边框会将元素尺寸增加到 106px x 106px：
Now we give it a border radius of 20%:
现在我们给它一个 20% 的边界半径：
You can see it starts cropping from the outer boundary of the element, not from the image itself.
您可以看到它从元素的外边界开始裁剪，而不是从图像本身开始裁剪。
Further increasing the magnitude to 50%:
进一步将幅度增加到 50%：
And changing the border color to white:
并将边框颜色更改为白色：
You can now see how the issue arises.
您现在可以看到问题是如何出现的。
Because of such behavior of the browser, when creating an image in a circle with a border, we have to make sure both the image and the border are given a border radius. One way to ensure this is to separate the border from the image by placing the image inside a container, and apply border radius to both of them.
由于浏览器的这种行为，当在带有边框的圆形中创建图像时，我们必须确保图像和边框都被赋予了边框半径。确保这一点的一种方法是通过将图像放入容器中来将边框与图像分开，并将边框半径应用于它们。
<div class="activity_rounded"><img src="http://placehold.it/100" /></div>
.activity_rounded {
display: inline-block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
border: 3px solid #fff;
}
.activity_rounded img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
vertical-align: middle;
}
And now we have a nice circle border around the image on Safari.
现在我们在 Safari 上的图像周围有一个漂亮的圆形边框。
See DEMO.
见演示。
回答by nakrill
Seems this one works:
似乎这个有效：
.wrap{
-webkit-transform: translateZ(0);
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}
回答by Jin Liu
Just simply use box-shadowif you don't care the old browsers.
box-shadow如果您不关心旧浏览器，只需简单地使用即可。
.rounded {
box-shadow: 0 0 0 10px pink;
}
回答by FungyBytes
Have you tried the longhand markup?
您是否尝试过手写标记？
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius
It seems like there are some bugs on using the short-hand notation with some versions of Safari.
在某些版本的 Safari 中使用速记符号似乎存在一些错误。
回答by Praveen Kumar Purushothaman
Try this by adding overflow: hidden;to the set of rules. This is an issue with all the webkit browsers:
通过添加overflow: hidden;到规则集来尝试此操作。这是所有 webkit 浏览器的问题：
.activity_rounded {
-webkit-border-radius: 50%;
-khtml-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 3px solid #fff;
behavior: url(css/PIE.htc);
overflow: hidden;
}
回答by Thilanka De Silva
Simple way i did was use rounded PNG images and apply a border and radius of 50%
我所做的简单方法是使用圆形 PNG 图像并应用 50% 的边框和半径
example :
例子 ：
回答by James Hartig
Instead of putting the border on the image itself, put it on the container. Make sure the border-radius is on both the image and the container
不要将边框放在图像本身上，而是将其放在容器上。确保边界半径在图像和容器上
.img-container {
border-radius 100%;
border: solid 1px #000;
overflow: hidden;
}
.img {
border-radius: 100%;
}
回答by Noel Whitemore
If the image's border radius is set the same as its parent div, the accepted solution works fine for circular images but not rounded rectangles because the width of the image is less than that of its parent div and the border radius needs to be scaled in proportion to the image, otherwise the image will appear more rounded than the parent div and there will be a gap between the inside edges of the parent div and the outside edges of the image.
如果图像的边框半径设置为与其父 div 相同，则可接受的解决方案适用于圆形图像，但不适用于圆角矩形，因为图像的宽度小于其父 div 的宽度，并且边框半径需要按比例缩放到图像，否则图像会比父 div 看起来更圆润，并且父 div 的内边缘和图像的外边缘之间会有间隙。
However, if you can specify your div/image widths in absolute dimensions it's possible to set a border radius for the image so that it will fit exactly inside its parent div, by taking into account the border width.
但是，如果您可以在绝对尺寸中指定 div/图像宽度，则可以通过考虑边框宽度来设置图像的边框半径，使其完全适合其父 div。
HTML:
HTML：
<div class="image-container-1"><img src="my_image.jpg" /></div>
<div class="image-container-2"><img src="my_image.jpg" /></div>
CSS:
CSS：
.image-container-1 {
border: 6px solid #FF0000;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
height: 250px;
overflow: hidden;
width: 250px;
}
.image-container-2 {
border: 6px solid #FF0000;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
height: 250px;
overflow: hidden;
width: 250px;
}
.image-container-2 img {
border-radius: 14px; /* 20px border radius - 6px border */
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
height: 250px;
width: 250px;
}
RESULT:
结果：
This solution was also tested in Internet Explorer 9 and Chrome 43 and the results were the same.
此解决方案也在 Internet Explorer 9 和 Chrome 43 中进行了测试，结果相同。
回答by GeorgeR
But if you have a border with radius on a div and inside it you have dynamic content (like if you click on that div, it slides down and show some other content), and you want to redesign your border with the same radius, you can use an aux class that redraw the radius (but the hack is that if you don't change the colour of the border the webkit will not redraw it).
但是，如果您在 div 上有一个带半径的边框，并且在其中有动态内容（例如，如果您单击该 div，它会向下滑动并显示一些其他内容），并且您想重新设计具有相同半径的边框，您可以使用一个 aux 类来重绘半径（但黑客是如果你不改变边框的颜色 webkit 将不会重绘它）。
Eg:
例如：
$(document).on('click', '.parent', function(e){ $('.content').toggleClass('opened').slideToggle(300);
$(this).toggleClass('refreshBorders');
});.parent{
cursor:pointer;
text-align:center;
-webkit-border:2px solid black;
-moz-border:2px solid black;
border:2px solid black;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
-webkit-background-clip:padding-box;
transition: all 0.15s ease-in-out;
}
.content{
text-align:center;
display:none;
}
.opened{
display:inline-block;
}
.refreshBorders{
-webkit-border:2px solid red;
-moz-border:2px solid red;
border:2px solid red;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
-webkit-background-clip:padding-box;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="first">
<h1> title </h1>
</div>
<div class="content">
<p> content content content</p>
</div>
</div>回答by karthikeyan ganesan
do not use the position:relative|absolutestyle attribute for your overflow:hiddenrounded corner item
不要position:relative|absolute为overflow:hidden圆角项目使用style 属性
for example
例如
<style>
.rounded_corner_style
{
background-color: #00FF00;
width: 100px;
height: 100px;
overflow: hidden;
border-radius:100px; /* you can also use border-radius:100% | border-radius:2px*/
}
</style>
<div class="rounded_corner_style">
<img src="https://i.stack.imgur.com/Kgblc.png" style="height:100%"/>
</div>
