圆角（边界半径）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+、Google Chrome 和 Mozilla Firefox 中一切正常。但是 Safari 的行为有点奇怪。这是一个演示图片：

原文由 Ivanka Todorova 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 上的图像周围有一个漂亮的圆形边框。

见 演示。

原文由 Antony 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

似乎这个有效：

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

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

原文由 nakrill 发布，翻译遵循 CC BY-SA 3.0 许可协议