這是我的CSS & ampHTML。我想讓一個圖像看起來像一個圓。在IE8+、谷歌Chrome和Mozilla Firefox中一切正常。但是Safari有點奇怪。這是一張演示圖片:

為了說明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上的圖片周圍有了一個漂亮的圓形邊框。

參見演示。

似乎這一條有用:

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

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

嘗試添加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;
}

將以下CSS代碼添加到根html元素中:

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

如果你不在乎舊的瀏覽器，就簡單地使用框陰影。

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

你試過手寫標記嗎？

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

在Safari的某些版本中使用簡寫符號似乎有一些錯誤。

我做的簡單方法是使用圓角的PNG圖像，并應用50%的邊界和半徑

示例:

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

不要把邊框放在圖片本身上，而是放在容器上。確保圖像和容器上都有邊框半徑

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

.img {
    border-radius: 100%;
}

如果圖像的邊框半徑設置為與其父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中進行了測試，結果是相同的。

但是如果你在一個div上有一個帶半徑的邊框，并且在它里面有動態內容(比如如果你點擊那個div，它會向下滑動并顯示一些其他內容)，并且你想用相同的半徑重新設計你的邊框，你可以使用一個重畫半徑的aux類(但是問題是如果你不改變邊框的顏色，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>

不要對溢出:隱藏使用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>

剪輯路徑形狀語法現在在所有現代瀏覽器中普遍可用。

我在Safari上遇到了同樣的問題，它沒有裁剪溢出的偽元素。

使用clip-path: content-box應該可以解決safari中的大多數用例:

.my-class {
  border-radius: 50%; /* or whatever */
  clip-path: content-box;
  overflow: hidden;
}

請點擊此處了解更多信息