CSS zaokrąglone narożniki na problemu obrazu

Question

Mam problem zaokrąglania narożników z użyciem CSS3 IMG:

Jest to kod używam:

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

Jak widać, zewnętrzna granica jest zaokrąglona, ​​ale rzeczywiste zdjęcie jest wyrównane. Czy za pomocą CSS3 mogę zaokrąglić rogi również na rzeczywistym obrazie?

Answer 1

użytku dwa pojemniki, zarówno z zaokrąglonymi narożnikami (nie img), i nie zapomnij overflow: hidden na wewnętrznej:

przykład kod tutaj: http://jsfiddle.net/jackJoe/YhDXm/

Answer 2

Umieść wokół obrazu obraz <div> i zastosuj do tego opakowania numer border-radius. Dodaj overflow: hidden; i możesz już iść. To dlatego, że znaczniki <img> nie mogą mieć zaokrąglonych narożników.

Answer 3

Podobną odpowiedź na poprzednie dwa. Użyj rozpiętości wokół obrazu i zastosuj oba promienie obramowania.

Jest Bardziej szczegółowy opis tutaj: http://easierthan.blogspot.co.uk/2012/12/code-tip-2-rounded-borders-on-images-in.html

Niektóre przeglądarki zaczynają obsługiwać to lepiej, ale nadal istnieją przypadki, w których kwadrat obrazu pokazuje wskroś.