CSS Border radius не обрезает изображение на Webkit

Question

У меня проблемы с выяснением, почему border-radius исчез из моего элемента #screen при использовании chrome, а не firefox или ie9?

У меня есть все разные префиксы для каждого браузера плюс стандартный border-radius:

www.cenquizqui.com

Верхнее поле содержимого, содержащее картинки, называемое # screen

копия вставки css экрана:

#screen {background: none repeat scroll 0 0 #EEEEEE;
    display: block;
    height: 300px;
    position: relative;
    width: 960px;
    overflow:hidden;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;}

Это связано с тем, что Chrome неправильно обрабатывает «обрезку» изображений? Я думал, что это проблема только тогда, когда у вас есть фактические теги внутри контейнера с закругленными углами, а не когда img вызывается как background-image через css.

С уважением G.Campos

Answer 1

Вот обходной путь, который исправит текущую ошибку Chrome:

.element-that-holds-pictures {
   perspective: 1px; /* any non-zero value will work */
}

Это никак не повлияет на отображение (в отличие от обходного пути opacity:0.99, который, кстати, тоже неплохой).

Answer 2

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

Answer 3

Существует гораздо более простое решение.

Просто добавьте overflow:hidden к контейнеру, который имеет border-radius и содержит дочерние элементы. Это препятствует тому, чтобы дети «текли» по контейнеру. Таким образом, исправляя проблему и показывая border-radius

Answer 4

Попробуйте следующее css для дочерних элементов элемента с установленным border-radius: opacity:0.99; Это решает проблему и не сильно меняет непрозрачность.Это отлично сработало для меня.

Answer 5

У него очень большой радиус границы:

(я только что добавил границу с панелью инструментов Chrome dev).

Радиус границы не меняется• ограничить его содержимое до результирующей области - пространство вне углов по-прежнему может быть занято содержимым элемента.

Я бы порекомендовал наложить изображение, у которого углы были вырезаны таким образом (и затем использоватькарта или все, что вам удобно, чтобы все еще включить стрелки влево / вправо).

Answer 6

Похоже, вам нужно применить радиус границы к элементу li:

#slides li {
display: block;
float: left;
height: 300px;
width: 960px;
position: relative;
border-radius: 10px;
}