html - Rounded cornes (border radius) Safari issue

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

This is my CSS & HTML. I want to make an image look like a circle. Everything works fine in IE8+, Google Chrome and Mozilla Firefox. But Safari is acting kinda strange. Here is a demo picture: enter image description here

score 121 · Accepted Answer

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

见演示。

score 37 · Accepted Answer

似乎这个工作：

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

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

score 4 · Accepted Answer

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

score 3 · Accepted Answer

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

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

score 2 · Accepted Answer

您是否尝试过手写标记？

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

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

score 2 · Accepted Answer

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

例子：

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

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

与其将边框放在图像本身上，不如将其放在容器上。确保边界半径在图像和容器上

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

.img {
    border-radius: 100%;
}

score 1 · Accepted Answer

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

score 0 · Accepted Answer

但是，如果您在 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>

score 0 · Accepted Answer

不要为圆角项目使用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>

html - Rounded cornes (border radius) Safari issue

11 回答 11

Related

Reference