#css #html #carousel #curve
#css #HTML #карусель #кривая
Вопрос:
У меня есть карусель на моей странице. У меня и родительский элемент, и дочерний элемент имеют изогнутые края, но когда вы нажимаете «Следующий» или «Предыдущий» и перемещаете карусель, дочерний элемент не остается изогнутым при перемещении. Как я могу предотвратить это?
.holder {
width:650px;
margin:200px auto;
overflow:hidden;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#s7 #posts {
width: 620px;
padding: 15px;
color: #333;
font-size: 14px;
text-align:left;
background:#EEE;
line-height:16px;
min-height:500px;
overflow:visible;
z-index:-1;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
Ответ №1:
На самом деле, я готов поспорить, что он действительно остается изогнутым, просто это слишком быстро видно. Он не выглядит изогнутым, потому что вы видите его середину во время анимации, которая, конечно, не изогнута (например, вы видите ВЕРХНЮЮ часть окна, а не верхний левый угол).
добавьте радиус к родительскому div#s7 , и вы должны быть установлены.
Комментарии:
1. Я протестировал это, избавившись от углов и добавив их только к родительскому элементу, и прямо перед полной загрузкой страницы дочерний элемент подчиняется родительскому элементу, но при загрузке страницы это не удается.
Ответ №2:
Убедитесь, что вы передаете border-radius CSS в JavaScript, или, скорее, убедитесь, что JS / jQuery не удаляет его.
Используя Firebug, я вижу, что для всех <div> сгенерированных элементов не назначено свойство border-radius. Добавление этого атрибута в ваш JS должно устранить проблему.