圆angular（边界半径）Safari的问题
.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浏览器有点奇怪。 这是一个演示图片： 
为了说明Safari中的问题，让我们从一个简单的图像开始。
这里我们有一个100px x 100px的图片。 添加3px的边框将元素尺寸增加到106px x 106px：
现在我们给它一个20％的边界半径：
你可以看到它从元素的外边界开始裁剪，而不是从图像本身。
进一步增加到50％：
并将边框颜色更改为白色：
你现在可以看到问题是如何出现的。
由于浏览器的这种行为，当在具有边框的圆圈中创build图像时，我们必须确保图像和边框被赋予边界半径。 确保这一点的一种方法是通过将图像放置在容器中将边界与图像分开，并将边界半径应用于两者。
<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 。
似乎这个工程：
.wrap{ -webkit-transform: translateZ(0); -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); }
你有没有试过这个慢速标记？
-webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-border-bottom-left-radius -webkit-border-bottom-right-radius
在某些版本的Safari中使用简写符号似乎存在一些错误。
只要简单地使用box-shadow如果你不关心旧的浏览器。
.rounded { box-shadow: 0 0 0 10px pink; }
不要把边界放在图像本身上，而是放在容器上。 确保边界半径在图像和容器上
.img-container { border-radius 100%; border: solid 1px #000; overflow: hidden; } .img { border-radius: 100%; }
尝试通过添加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; }
如果图像的边框半径设置为与其父div相同，则接受的解决scheme对于圆形图像可以正常工作，但不能圆angular矩形，因为图像的宽度小于其父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; }
结果： 
此解决scheme也在Internet Explorer 9和Chrome 43中进行了testing，结果相同。
但是如果你在div上有一个半径的边界，并且里面有dynamic内容（就像你点击那个div，它滑落并显示其他内容），并且你想用相同的半径重新devise你的边框，可以使用重绘半径的辅助类（但是如果不改变边框的颜色，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>
