CSS Радиус рамки не обрезает изображение на Webkit

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

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

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

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

Отношения G.Campos

Ответы

Ответ 1

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

Ответ 2

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

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

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

Ответ 3

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

Просто добавьте overflow:hidden в контейнер с радиусом границы и удерживайте дочерние элементы. Это предотвращает "протекание" детей над контейнером. Таким образом, устранение проблемы и отображение радиуса границы

Ответ 4

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

Ответ 5

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

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

Ответ 6

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

enter image description here

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

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

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