圆角（边界半径）Safari问题答案

【问题标题】：Rounded cornes (border radius) Safari issue圆角（边界半径）Safari问题
【发布时间】：2013-06-19 21:59:43
【问题描述】：

.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 的行为有点奇怪。这是一张演示图片：

【问题讨论】：

适用于 Mac/iOS 或 Windows 的 Safari？值得注意的是，不再支持 Windows 版本...
Mac 上的 Safari。而且我无法弄清楚为什么 Safari 会这样......
如果您可以分别更改不同浏览器的半径，然后为 safari 增加它！ :)
我设置什么值并不重要。例如，我可以做 100px（在 40px 图片上）之类的操作，但没有效果。
如果可能，尝试以 px 为单位设置值，看看是否会有所不同。顺便说一句，您不再需要边界半径的供应商前缀。此外，它可能是一个 Safari 错误，会在更新期间自行修复。

标签： html css

【解决方案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。

【讨论】：

注意两点： 1. 边界半径现在得到了很好的支持，以至于您可以删除供应商前缀。 2. 使用供应商前缀时，在所有供应商特定前缀之后说明通用。顺便说一句，这个问题的答案很好！
@Antony 嗯。所以，Safari 说“50% 半径”是（在这个例子中）50px，因此平坦的边缘是“剩余”边界的12px？这意味着 Firefox 等人必须将半径计算为53px？也许保留标记原样但更改box-sizing 也可以吗？几乎让我希望我有一台 Mac 来测试这个......
@TiesonT。听起来很合理，但更改 box-sizing 对 Safari 没有影响。刚刚测试过了。
@Antony 够了。必须牢记这种行为。感谢您的检查。
@Julian 它似乎已在 Safari 7.0 中修复。

【解决方案2】：

看来这个可行：

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

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

【讨论】：

为我工作，除了我没有使用-webkit-transform 并且我添加了border-radius: xx%
同样的事情，但 clip-path: -webkit-clip-path: circle(50% at 50% 50%);
对我来说，我只需要translateZ(0);
大家好，如果对你有用，神秘的transform: translateZ(0);表面下的黑魔法是什么？看不懂，怎么不负责任的写到我的生产代码库中？

【解决方案3】：

通过将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;
}

【讨论】：

我在windows下的Safari 5.1中试过，并没有帮助解决问题。

【解决方案4】：

如果您不在乎旧浏览器，只需使用box-shadow。

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

【讨论】：

2020 年 8 月，这是迄今为止最简单的实现围绕 Semantic React UI 表的小边框。 box-shadow: 0px 0px 1px 0.5px #fff;

【解决方案5】：

您尝试过手写标记吗？

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

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

【讨论】：

我在windows下的Safari 5.1中试过，并没有帮助解决问题。

【解决方案6】：

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

例子：

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

【讨论】：

【解决方案7】：

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

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

【讨论】：

这个解决方案只对我有用 -webkit-transform: translate3d(0, 0, 0);这很有趣，因为如果我理解正确，这会将图像移动 0 px？我还能够在图像级别而不是根级别添加它。

【解决方案8】：

不要将边框放在图像本身上，而是将其放在容器上。确保边框半径在图像和容器上

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

.img {
    border-radius: 100%;
}

【讨论】：

【解决方案9】：

如果图像的边框半径设置为与其父 div 相同，则可接受的解决方案适用于圆形图像，但不适用于圆角矩形，因为图像的宽度小于其父 div 的宽度，并且边框半径需要与图像成比例缩放，否则图像会显得比父 div 更圆，并且父 div 的内边缘和图像的外边缘之间会有间隙。

但是，如果您可以以绝对尺寸指定 div/图像的宽度，则可以通过考虑边框宽度为图像设置边框半径，使其完全适合其父 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 中进行了测试，结果相同。

【讨论】：

【解决方案10】：

但是，如果您在 div 上有一个带半径的边框，并且在其中您有动态内容（例如，如果您单击该 div，它会向下滑动并显示一些其他内容），并且您想用相同的方式重新设计边框半径，你可以使用一个辅助类来重绘半径（但黑客是，如果你不改变边框的颜色，webkit 将不会重绘它）。

例如：

$(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>

【讨论】：

【解决方案11】：

不要为您的overflow:hidden 使用position:relative|absolute 样式属性圆角项目

例如

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

【讨论】：