Chrome bug中的border-radius？

Question

我在chrome中的border-radius有問題，這是我的代碼：

img{
border-radius: 24px;
border: 2px solid #c7c7c7;                 
-moz-border-radius:24px; 
-webkit-border-radius: 24px;
}

在mozzila它工作正常，但在鉻它看起來很有趣......在mozzila我可以看到一個與我的圖像接壤的圓圈，但在鉻上圓圈裁剪邊框，我只能看到直線

截圖： http ： //postimage.org/image/27turq0mc/

你能幫我嗎？

Answer 1

這可能是一個鉻蟲。 一個解決方案可能是使用div包裝img並生成以下css：

img{                
    -moz-border-radius:24px; 
    -webkit-border-radius: 24px;
    border-radius: 24px;
    display:block;
}
div {
    border: 2px solid #c7c7c7; 
    border-radius: 24px;
    -webkit-border-radius: 24px;
    width:40px; /* the width of image */
    height:40px; /* the height of image */
}

演示： http ： //jsfiddle.net/EnmMp/1/

Answer 2

我有同樣的問題和解決方案提供：

http://webdesignerwall.com/tutorials/css3-rounded-image-with-jquery

解決了這個問題。

首先，它顯示了僅使用CSS3和HTML的解決方案，然后使用JQuery呈現解決方案。

Answer 3

而不僅僅是下面的邊框代碼

-moz-border-radius: 2px 2px 15px 15px;

對於從左上角開始順時針應用的半徑，此刻您無法對Webkit執行此操作。 所以你必須像長手一樣把它寫出來：

-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;

Answer 4

嘗試在背景圖像上而不是在html img元素上進行，因為一些img元素不適用於邊界半徑（但我猜）。

div.something{
background-image:url(something.png);
border-radius: 24px;
border: 2px solid #c7c7c7;
border-radius: 24px;
}