圆角cornes（边界半径）Safari问题 [英] Rounded cornes (border radius) Safari issue

问题描述

  .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.jpgclass =activity_roundedalt =/> 
  

这是我的CSS& HTML。我想让图像看起来像一个圆圈。一切工作正常在IE8 +，谷歌Chrome和Mozilla Firefox。但是Safari是很奇怪的。这是一个演示图片：

这里我们有一个100px x 100px的图片。添加3px的边框会将元素尺寸增加到106像素x 106像素：

现在我们给它一个20％的边界半径：

您可以看到它开始从外边界裁剪

进一步将幅度提高到50％：

并将边框颜色更改为白色：

您现在可以看到问题产生的原因。

由于浏览器的这种行为，在使用边框创建图片时，我们必须请确保图像和边框都有边框半径。确保这一点的一种方法是通过将图像放置在容器内将边界与图像分开，并将边框半径应用于这两者。

 < 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; 
} 
  

现在我们在Safari上的图片周围有一个漂亮的圆形边框。 p>

请参阅 DEMO 。

.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:

解决方案

To illustrate the problem in Safari, let's begin with a plain image.

Here we have an image of 100px x 100px. Adding a border of 3px increases the element dimensions to 106px x 106px:

Now we give it a border radius of 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%:

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.

See DEMO.

这篇关于圆角cornes（边界半径）Safari问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！