圆角（边框半径）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

---

在Mac/iOS上使用Safari，还是在Windows上使用？值得注意的是，Windows版本已不再受支持... - Tieson T.

Safari在Mac上。我无法弄清楚为什么Safari会这样表现... - Ivanka Todorova

如果可以分别为不同的浏览器更改半径，则将其增加到Safari中！ :) - Mohammad Areeb Siddiqui

无论我设置什么值都没有影响。例如，我可以在40像素的图片上设置100像素，但没有任何效果。 - Ivanka Todorova

如果可能的话，尝试以px为单位设置值，看看是否有所不同。顺便说一句，现在不需要使用供应商前缀来设置border-radius了。此外，这可能是Safari的一个bug，在更新期间会自行修复。 - frenchie

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

---

两点需要注意：1.边框半径现在得到了很好的支持，以至于您可以放弃厂商前缀。2.使用厂商前缀时，请在所有厂商特定前缀之后声明通用前缀。顺便说一句，这是一个很棒的回答！ - Chris Ferdinandi

@Antony 嗯。所以，Safari说“50%的半径”在这个例子中是50px，因此平坦的边缘是“剩余”的12px边框？这意味着Firefox等浏览器必须将半径计算为53px？也许保留标记但更改box-sizing也可以起作用？几乎让我希望我有一台Mac来测试这个... - Tieson T.

@TiesonT。听起来很合理，但是更改box-sizing对Safari没有影响。我刚测试过了。 - Antony

@安东尼 好的，我会记住这种行为的。谢谢你的核实。 - Tieson T.

似乎在Safari 7.0中已经修复了。 - Antony

Answer 2

看起来这个有效：

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

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

- nakrill

---

对我而言可行，只是我没有使用“-webkit-transform”，而且我加入了border-radius: xx%。 - Alex W

同样的事情，但使用 clip-path：-webkit-clip-path: circle(50% at 50% 50%); - fregante

对我来说，我只需要translateZ(0);。 - Ronnie

大家好，如果它对你有用的话，那么神秘的 transform: translateZ(0); 表面下有什么黑魔法呢？如果我不理解它，我怎么能在我的生产代码库中不负责任地编写它呢？ - legend80s

Answer 3

将以下CSS代码添加到根HTML元素中：

-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);

- Daniel Ehrhardt

---

这个解决方案对我来说只需要-webkit-transform: translate3d(0, 0, 0);就可以了。有趣的是，如果我理解正确的话，这将把图像移动0像素？此外，我能够在图像级别而不是根级别添加它。 - arc4randall

Answer 4

尝试通过添加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;
}

- Praveen Kumar Purushothaman

---

我在Windows下尝试了Safari 5.1，但它并没有帮助解决问题。 - Julian

Answer 5

如果您不关心旧浏览器，只需简单地使用box-shadow即可。

.rounded {
  box-shadow: 0 0 0 10px pink;
}

- Jin Liu

---

2020年8月，这是迄今为止最简单的实现方法，可以在Semantic React UI表格周围创建一个小边框。box-shadow: 0px 0px 1px 0.5px #fff; - Ruben Murray

Answer 6

你尝试过手写标记吗？

-webkit-border-top-left-radius 
-webkit-border-top-right-radius 
-webkit-border-bottom-left-radius 
-webkit-border-bottom-right-radius 

似乎在某些版本的Safari中使用简写符号存在一些错误。

- FungyBytes

---

我在Windows下尝试了Safari 5.1，但它并没有帮助解决问题。 - Julian

Answer 7

我使用的简单方法是使用圆形PNG图像并应用50％的边框和半径。

例如：

http://www.laugfs.lk/#ourbusiness

- Thilanka De Silva

Answer 8

如果图像的边框半径与其父div相同，则接受的解决方案对于圆形图像有效，但对于圆角矩形则无效，因为图像的宽度小于其父div的宽度，边框半径需要按比例缩放以适应图像，否则图像将比父div更圆，并且父div的内部边缘与图像的外部边缘之间会有一个间隙。

但是，如果您可以在绝对尺寸中指定div / image宽度，则可以设置图像的边框半径，使其完全适合其父div，考虑到边框宽度。

HTML：

<div class="image-container-1"><img src="my_image.jpg" /></div>
<div class="image-container-2"><img src="my_image.jpg" /></div>

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

结果：

此解决方案还在Internet Explorer 9和Chrome 43中进行了测试，结果相同。

- Noel Whitemore

Answer 9

修改为Lesbaas 2023的回答：

如果你想在div周围有一个边框，可以使用view-box来进行剪切路径。 clip-path: view-box;

- Fohri

Answer 10

不要将边框放在图片本身上，而是放在容器上。确保边框半径同时应用于图片和容器。

.img-container {
    border-radius 100%;
    border: solid 1px #000;
    overflow: hidden;
}

.img {
    border-radius: 100%;
}

- James Hartig