border-radius？

我有鍍鉻這個邊界半徑的問題是我的代碼：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/

你能幫忙嗎？

來源

2011-10-12 Dorel

你可以舉個例子http://jsfiddle.net/sandeep/Q55C8/5/ – sandeep

我無法看到圖像... – BoltClock

這可能是一個鉻錯誤。一個解決辦法是包裹img與div，使下面的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/

來源

2011-10-12 12:27:01 Sotiris

嘗試在背景圖片上而不是在HTML img元素上做，因爲一些img元素不會與邊框半徑（但我gueass）工作。

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

來源

2011-10-12 12:11:57

我的圖片是由一個PHP函數生成... ，我必須在img上工作，因爲它是... – Dorel

然後你有一個問題，因爲邊界不允許剪切圖像元素，但你可以嘗試動態改變背景與PHP，並作爲即時通訊不是一個PHP的人這裏是一個鏈接http://drupal.org/node/98246 –

使用背景圖像，而不是解決這個錯誤。該錯誤仍然發生。 –

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

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

修復了這個問題。

首先它顯示了僅使用CSS3 &HTML的解決方案，然後使用JQuery提供解決方案。

來源

2013-01-03 04:55:47

，而不只是下面的代碼邊境

-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;

來源

2013-08-26 02:40:22 user2716666

回答

相關問題