Tuesday 15 February 2011

css - Why border-radius:200px is not a circle shape in Safari 5/6? -


I use border-radius: 200px to make the image a circle size, it is IE10, Chrome, Firefox But works fine, but it's not a competitive cycle on Safari 5 and Safari 6.

My CSS code is:

  .tam-member img {display: block; Width: 50%; Height: auto; Margin: 0 auto 20px; Border: 4px solid # ccc; Webkit-boundary-radius: 200px; -khtml-boundary-radius: 200px; -image-radius: 200px; Range radius: 200px; }   

When I extract the boundary: 3px solid # ccc, it works fine on safari, but I need to keep the boundary around the image, how to fix this problem Do you? Thanks!

The demo is here:

My impression is that it is directly on an image A bug in Safari for using border-radius ; It is actually creating a circle, it is not just making the boundary around the edge of the circle, instead it is being cut off by it. I found a job around which is not ideal, but it can work for you. Actually apply border and border-radius to parents instead of here Here's an example:

and CSS:

  .tem-member {width: 200px; Height: 200 pixels; Border: 4px solid # ccc; Webkit-boundary-radius: 200px; -khtml-boundary-radius: 200px; -image-radius: 200px; Range radius: 200px; Hidden flurry; Margin: 20 px auto; } .Tem-member IMG {Display: Block; Width: 100%; Height: auto; }    

No comments:

Post a Comment