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

Question

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

Мне трудно понять, почему border-radius исчезает из моего элемента # 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;}

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

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

698 6

google-chrome css css3 webkit

6 ответов:

Comments

Ничего не найдено.

Adam · Accepted Answer · 2015-01-14 02:09:37

Вот обходной путь, который исправит текущую ошибку chrome:
.element-that-holds-pictures {
   perspective: 1px; /* any non-zero value will work */
}
Это не повлияет на отображение вообще (в отличие от opacity:0.99 обходного пути - который, кстати, тоже отличный обходной путь).

Sotkra · Accepted Answer · 2012-01-21 18:35:42

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

DutchKevv · Accepted Answer · 2015-08-25 15:59:36

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

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

kirtan-shah · Accepted Answer · 2014-12-03 07:15:14

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

justinlabenne · Accepted Answer · 2012-01-02 23:03:45

Похоже, что вам нужно применить радиус границы к элементу li:
#slides li {
display: block;
float: left;
height: 300px;
width: 960px;
position: relative;
border-radius: 10px;
}

Purag · Accepted Answer · 2012-01-02 23:10:22

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

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

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

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