flexslider border-radius不會在Chrome，Safari中包裝圖像，但會在Firefox中

Question

我試圖用幻燈片動畫選項在flexslider上顯示舷窗窗口。基本上圖像會滑動，但在一個圓圈中被遮住，我試圖用邊框半徑和溢出完成：隱藏在flexslider包裝上。

在Firefox中查看此頁面以查看所需結果，導致它在那裏工作。然後看到它不在Chrome或Safari中。 這裏是鏈接（幻燈片是我的照片）： http://imjoeybrennan.com/about.html

任何幫助非常感謝！ 謝謝， Joey

Answer 1

只是幫你一個問題。這個也很簡單。它在Chrome或Safari（webkit）中不起作用的原因是，當使用溢出隱藏+相對位置和邊框半徑時，存在webkit的已知錯誤。最簡單的解決方法是一個SVG的WebKit面膜添加到相同的元素：

.joey_pic .flexslider { 
-webkit-border-radius: 200px; 
-moz-border-radius: 200px; 
border-radius: 200px; 
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); 
overflow: hidden; 
} 

這也可能導致鋸齒狀邊緣，使另一種可能的解決方案是設置圓角半徑您flexslider內的圖像：（這是你下面懸停過渡）

.flexslider .slides img { 
max-width: 100%; 
display: block; 
border-radius: 100px; 
} 

希望正在做的圖像這有助於