bán kính đường viền trong lỗi Chrome?

Question

Tôi có một vấn đề với border-radius trong chrome đây là mã của tôi:

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

On Mozzila nó hoạt động tốt, nhưng trên chrome có vẻ buồn cười ... On Mozzila tôi có thể nhìn thấy một vòng tròn giáp hình ảnh của tôi, nhưng trên chrome vòng tròn cây trồng biên giới và tất cả tôi có thể thấy là đường thẳng

một ảnh chụp màn hình: http://postimage.org/image/27turq0mc/

bạn có thể giúp đỡ?

Answer 1

đây có thể là lỗi chrome. Một giải pháp có thể để quấn img với một div và làm cho css sau:

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 */ 
} 

Demo:http://jsfiddle.net/EnmMp/1/

Answer 2

Hãy thử thực hiện trên hình nền thay vì trên phần tử img html, vì một số phần tử img không hoạt động với bán kính đường viền (nhưng tôi đảm bảo).

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

Answer 3

tôi đã cùng một vấn đề và giải pháp được cung cấp bởi:

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

khắc phục sự cố.

Đầu tiên nó hiển thị giải pháp chỉ sử dụng CSS3 & HTML và sau đó trình bày giải pháp bằng cách sử dụng JQuery.

Answer 4

thay vì chỉ mã dưới đây để biết biên giới

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

Đối với bán kính được áp dụng chiều kim đồng hồ bắt đầu từ phía trên bên trái, bạn không thể làm điều đó cho Webkit vào lúc này. Vì vậy, bạn phải viết nó ra tay dài như:

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