CSS закругленные углы на изображении проблемы - PullRequest
Новая
       14

CSS закругленные углы на изображении проблемы

8 голосов
/ 28 июля 2011

У меня проблемы с округлением углов img с использованием CSS3:

enter image description here

Это код, который я использую: 

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, как я могу скруглить углы и на реальном изображении?

Ответы [ 3 ]

14 голосов
/ 28 июля 2011

используйте два контейнера, оба с закругленными углами (не img), и не забудьте overflow: hidden на внутренней стороне:

пример кода здесь: http://jsfiddle.net/jackJoe/YhDXm/

3 голосов
/ 14 декабря 2012

Подобный ответ на предыдущие два. Используйте интервал вокруг изображения и примените радиус границы к обоим.

Более подробное описание здесь: http://easierthan.blogspot.co.uk/2012/12/code-tip-2-rounded-borders-on-images-in.html

Некоторые браузеры начинают обрабатывать это лучше, но все еще есть случаи, когда квадрат изображения просвечивает.

1 голос
/ 28 июля 2011

Поместите <div> вокруг изображения и примените border-radius к этой обертке.Добавьте overflow: hidden; и все готово.Это связано с тем, что теги <img> не могут иметь закругленные углы.

...