1. 首頁
  2. 問答
  3. 圓角（邊緣半徑）Safari問題

圓角（邊緣半徑）Safari問題

2013-06-19 165 views
40 
.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的表現有點奇怪。這裏是一個演示圖片： enter image description here圓角（邊緣半徑）Safari問題

來源

2013-06-19 Ivanka Todorova

+6

Safari中馬c/iOS還是Windows？值得注意的是，Windows版本不再受到支持...... –

+0

Mac上的Safari。而我無法弄清楚爲什麼Safari的行爲如此... –

+0

如果您可以單獨更改不同瀏覽器的半徑，然後增加Safari瀏覽器！ :) –

回答

103

爲了說明Safari中的問題，讓我們從一個普通圖像開始。

在這裏，我們有100像素X 100像素的圖像。添加的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。

來源

2013-06-20 10:05:34 Antony

+3

你，先生，真棒！感謝您的時間。有用！ :) –

+2

+1優秀答案 – mate64

+2

需要注意的兩點：1.現在可以很好地支持border radius，這樣您就可以制定供應商前綴。 2.使用供應商前綴時，請註明所有供應商特定的泛型。這個問題很好的答案，順便說一句！ –

2

你試過了longhand標記嗎？

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

在一些版本的Safari中使用短符號似乎存在一些錯誤。

來源

2013-06-20 08:58:02 Kiwi1

+0

沒有任何變化。 –

+0

我在Safari 5.1下試過，它並沒有幫助解決問題。 – Julian

1

嘗試通過將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; 
}

來源

2013-06-20 09:01:53

+0

我在Safari 5.1下試過，並沒有幫助解決問題。 – Julian

1

而不是把邊界圖像本身，把它放在集裝箱。確保邊界半徑是圖像和容器

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

.img { 
    border-radius: 100%; 
}

來源

2014-05-13 07:38:44

+0

看起來[熟悉]（http://stackoverflow.com/a/17210864）。 – Antony

20

上都似乎這一個工程：

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

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

來源

2014-05-19 10:45:59 nakrill

+0

這對我來說完美無缺！謝謝。 –

+0

爲我工作，除了我沒有使用'-webkit-transform'並且我添加了'border-radius：xx％' –

+0

您是先生，是老闆。 –

2

只需簡單地使用box-shadow，如果你不照顧老人瀏覽器。

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

來源

2014-08-25 05:29:37

1

如果圖像的邊界半徑設置相同，其父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; 
}

結果： Border radius clipping example for Safari 5.1.0 and Firefox 35.1.0

將該溶液在Internet Explorer 9和Chrome 43也被測試，結果是相同的。

來源

2016-05-03 13:33:01

0

但是，如果您在div上有半徑邊框，並且裏面有動態內容（例如，如果您單擊該div，則會滑落並顯示其他內容），並且您希望重新設計邊框相同的半徑，可以使用重繪半徑的輔助類（但是如果不更改邊框的顏色，webkit將不會重繪它）。

如：

$(document).on('click', '.parent', function(e){ \t $('.content').toggleClass('opened').slideToggle(300); 
 
\t $(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>

來源

2017-06-06 18:04:26 GeorgeR

0

不使用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>

來源

2017-12-15 17:55:47

相關問題

 相關問題