邊框半徑不適用於safari 4.0.5.0 for windows 7及更高版本

iam添加邊框半徑圖片，但是當我運行瀏覽器測試使用瀏覽器堆棧時，我發現像Safari 5.0和以下版本的Windows 7 & 8不支持border-radius的財產，圖像被示出爲正方形一個邊框半徑不適用於safari 4.0.5.0 for windows 7及更高版本

HTML部分

<div class='profileDet'> 
    <img src='/img/eg.png' alt='image' id='circleImg'> 
    <div class='profileTile'><h>Title</h></div> 
</div>

下面和我的CSS

#circleImg{ 
width:100px; 
height:100px; 
border-radius:50px; 

/* for safari lower versions*/ 
-webkit-border-radius:50px; 

}

來源

2014-06-13 Bangalore

'border-radius'是一個CSS3屬性，因此較低版本的瀏覽器可能不支持。有關瀏覽器支持的詳細信息，請參閱http://caniuse.com/border-radius。 – Pugazh

我得到的解決方案，我會發布它 – Bangalore

這實際上應該起作用。不要忘記添加overflow: hidden。這將確保您的背景不會出現在圓角效果下方。

#circleImg{ 
width:100px; 
height:100px; 
border-radius:50px; 
overflow: hidden; 
/* for safari lower versions*/ 
-webkit-border-radius:50px; 

}

來源

2014-06-13 07:20:03 Vector

這不會工作... – Bangalore

添加這些行

-webkit-border-top-left-radius: 50px; 
-webkit-border-top-right-radius: 50px; 
-webkit-border-bottom-left-radius: 50px; 
-webkit-border-bottom-right-radius: 50px;

，現在它的工作！感謝你們。

來源

2014-06-13 08:30:03 Bangalore

邊框半徑不適用於safari 4.0.5.0 for windows 7及更高版本

回答

相關問題