CSSは、私はトラブルCSS3を使用してIMGの角を丸めを持ってるイメージ問題

Question

上の角を丸め：

これは私が使用しているコードです：

img.event-thumbimage { 
    height:120px; 
    width:140px; 
    -webkit-box-shadow: 0px 0px 10px 0px #4d4d4d; 
    -moz-box-shadow: 0px 0px 10px 0px #4d4d4d; 
    box-shadow: 0px 0px 10px 0px #4d4d4d; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    -khtml-border-radius: 8px; 
    border-radius: 8px; 
    border:solid white 3px; 
    float:left; 
    margin-right:25px; 
    } 

として、外側の境界線は丸みを帯びていますが、実際のimgは二乗されています。 CSS3を使用すると、実際の画像のコーナーをどのように丸くすることができますか？

Answer 1

使用二つの容器、角丸（imgない）の両方、および内側にoverflow: hidden忘れない：ここで

例コード：

http://jsfiddle.net/jackJoe/YhDXm/

Answer 2

画像の周りに<div>を置き、そのラッパーにborder-radiusを貼り付けます。 overflow: hidden;を追加してください。これは、<img>タグの角が丸くなることができないためです。

Answer 3

前と同様の回答を二。画像の周りにスパンを使用し、境界線の半径を両方に適用します。

より詳細なウォークスルーがここにあります：http://easierthan.blogspot.co.uk/2012/12/code-tip-2-rounded-borders-on-images-in.html

一部のブラウザでは、この優れたを処理するために始めているが、画像の四角が透けてインスタンスが残っています。