Скругленные углы изображений CSS3 не работают в Safari / Chrome?

Question

Я весело взламывал этот сайт, тестировал его в Firefox и Internet Explorer 9, считая само собой разумеющимся, что Safari и Chrome прекрасно отредактируют мой CSS3, когда я только что обнаружил, что это не так.

В FF и IE9 я вижу это:

В Safari / Chrome я вижу это:

ВотHTML:

<div class="container">
    <div>
        <img src="static/images/image1.jpg" alt="" />
    </div>

Вот CSS:

  .container {
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius: 10px;
  }

Что я делаю не так?: (

ОБНОВЛЕНИЕ
Пожалуйста, посмотрите рабочий пример проблемы, с которой я столкнулся: http://jsfiddle.net/jAsnU/3 Спасибо.

Answer 1

попробовать:

.container img {
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius: 10px;
}

Answer 2

Возможно, вы захотите установить радиус границы на .container div img.

Answer 3

Попробуйте добавить «переполнение: скрыто»;в стиле div.Я сделал быструю тестовую страницу в jsfiddle, и она, кажется, работала (проверила ее в Chrome, Safari и FireFox): http://jsfiddle.net/wabw8/

Answer 4

Я думаю, вам нужно указать border.

Итак, что-то вроде этого:

border:1px solid blue; // какой бы синий цвет вы не использовали.

Этопохоже, что FF и IE дают вам скругленную границу ... но как пустой элемент, который обрезает изображение.