CSS des coins arrondis sur un problème d'image

J'ai du mal à arrondir les coins d'une img à l'aide de CSS3:

CSS des coins arrondis sur un problème d'image

C'est le code que j'utilise:

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

Comme vous pouvez le voir, la bordure est arrondie, mais le réel img est carrée. À l'aide de CSS3 comment arrondir les angles sur l'image réelle?

OriginalL'auteur Rob | 2011-07-28

  1. 14

    utiliser deux conteneurs, à la fois avec les coins arrondis (pas le img), et n'oubliez pas le overflow: hidden à l'intérieur:

    exemple de code ici:
    http://jsfiddle.net/jackJoe/YhDXm/

    Merci, cela a fonctionné. Quelle est l'utilité de overflow:hidden;?
    il indique au conteneur de ne pas montrer de plus que la largeur et/ou hauteur; elle peut également être réglée sur auto (automatique montre les barres de défilement si nécessaire) et visible (barres de défilement toujours présent).

    OriginalL'auteur jackJoe

  2. 3

    Une réponse similaire aux deux précédentes. Utiliser une plage autour de l'image et d'appliquer les border-radius pour les deux.

    Il est plus détaillée de la procédure pas à pas ici: http://easierthan.blogspot.co.uk/2012/12/code-tip-2-rounded-borders-on-images-in.html

    Certains navigateurs commencent à gérer ce mieux, mais il y a encore des cas où la place de l'image le montre à travers.

    OriginalL'auteur TheBozzMan

  3. 1

    Mettre un <div> autour de l'image et d'appliquer les border-radius pour que le wrapper. Ajouter overflow: hidden; et vous êtes bon pour aller. C'est parce que <img> les balises ne peuvent pas avoir des coins arrondis.

    Qui me donne juste le même effet qu'avant, juste différemment. L'img est toujours carrée avec le bord extérieur arrondi.

    OriginalL'auteur Karl Laurentius Roos