圆角(边界半径)Safari问题

Question

.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="" />

这是我的CSS和HTML.我想让图像看起来像一个圆圈.在IE8 +,谷歌浏览器和Mozilla Firefox中一切正常.但Safari的表现有点奇怪.这是一个演示图片:

Answer 1

为了说明Safari中的问题,让我们从一个普通的图像开始.

这里我们有100px x 100px的图像.添加3px的边框会将元素尺寸增加到106px x 106px:

现在我们给它一个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上的图像周围有一个漂亮的圆形边框.

见DEMO.

Answer 2

似乎这个工作:

.wrap{
   -webkit-transform: translateZ(0);
   -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

http://jsfiddle.net/qWdf6/82/