CSS Радиус frameworks не обрезает изображение на Webkit
У меня возникли проблемы с выяснением, почему радиус границы исчез из моего элемента #screen при использовании хром, но не firefox или ie9?
У меня есть все разные префиксы для каждого браузера плюс стандартный граничный радиус:
www.cenquizqui.com
- Сокращение перехода CSS с несколькими свойствами?
- CSS3 Непрерывная анимация вращения (точно так же, как загрузка солнечных часов)
- Что такое WebKit и как это связано с CSS?
- Видимость видимости Webkit не работает
- $ http не отправляет cookie в Requests
Верхняя область содержимого, в которой хранятся изображения, называется #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;} Это потому, что хром не обрабатывает «обрезку» изображений правильно? Я думал, что это была проблема только в том случае, когда у вас были tags в скругленном контейнере, а не когда img вызывается как фоновое изображение через css.
С уважением Г.Кампос
- Размытый текст после использования CSS transform: scale (); в Chrome
- css3 переход анимации при загрузке?
- CSS Что такое -moz- и -webkit-?
- Как я могу отлаживать javascript на Android?
- : активный псевдоclass не работает в мобильном safari
- Как удалить выделение границы в текстовом элементе ввода
- css z-index потерян после преобразования webkit translate3d
- CSS3 - Как стилизовать выделенный текст в текстовых областях и входах в Chrome?
Ниже приведено обходное решение, позволяющее исправить текущую хром-ошибку:
.element-that-holds-pictures { perspective: 1px; /* any non-zero value will work */ }
Это не повлияет на отображение вообще (в отличие от opacity:0.99 обходной путь, что тоже очень удобно, кстати).
Webkit не может обрабатывать обрезку радиуса для детей и внуков +. Это просто плохо. Если вы хотите обрезать границу, она должна быть непосредственно на div, на котором размещается изображение, без дальнейшего углубления иерархии.
Существует гораздо более простое решение.
Просто добавьте overflow:hidden в контейнер с радиусом границы и содержит дочерние элементы. Это предотвращает «протекание» детей над контейнером. Таким образом, устранение проблемы и отображение радиуса границы
Попробуйте выполнить следующий css дочерним элементам элемента с заданным радиусом границы: opacity:0.99; Он решает проблему и не сильно меняет непрозрачность. Это отлично сработало для меня.
Похоже, вам нужно применить радиус границы к элементу li:
#slides li { display: block; float: left; height: 300px; width: 960px; position: relative; border-radius: 10px; }
У него очень большой радиус границы:
(Я только добавил границу с панелью инструментов Chrome.)
Радиус границы не ограничивает его содержимое внутри результирующей области – пространство за пределами углов по-прежнему может быть использовано содержимым элемента.
Моя рекомендация состояла бы в том, чтобы наложить изображение, на котором были вырезаны углы (а затем использовать карту или что-то, что вам удобно, чтобы все же включить стрелки влево / вправо).