圆角（边界半径）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＆amp; 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/

Answer 3

您是否尝试过手写标记？

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

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

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

Answer 5

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

示例：

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

Answer 6

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

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

Answer 7

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

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

.img {
    border-radius: 100%;
}

Answer 8

如果图像的边框半径设置与其父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中进行了测试，结果相同。

Answer 9

但是如果你在div上有一个带有半径的边框，那么你就有动态内容（比如你点击那个div，它会向下滑动并显示其他一些内容），你想用同样的方法重新设计你的边框radius，你可以使用一个重绘半径的辅助类（但是黑客就是如果你不改变边框的颜色，webkit就不会重绘它）。

例如：

＆＃13;

＆＃13;

$(document).on('click', '.parent', function(e){	$('.content').toggleClass('opened').slideToggle(300);
	$(this).toggleClass('refreshBorders');
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 10

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

例如

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