CSS在圖像問題上圓角

Question

我在使用CSS3繞過img的角落時遇到了麻煩：

這是我正在使用的代碼：

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

與前兩個類似的答案。 使用圖像周圍的跨度並將邊界半徑應用於兩者。

這里有一個更詳細的演練： http ： //easierthan.blogspot.co.uk/2012/12/code-tip-2-rounded-borders-on-images-in.html

有些瀏覽器開始更好地處理這個問題，但仍然存在圖像的正方形顯示的情況。

Answer 3

在圖像周圍放置一個<div>並將border-radius應用於該包裝器。 添加overflow: hidden; 而你很高興。 這是因為<img>標簽不能有圓角。