css - 子元素不继承父元素的弯曲边缘？

Question

我的页面上有一个轮播。我的父元素和子元素的边缘都是弯曲的，但是当您按“下一个”或“上一个”并滑动轮播时，孩子在移动时不会保持弯曲。我怎样才能防止这种情况？

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

Answer 1

确保将border-radiusCSS 传递给 JavaScript，或者更确切地说，确保 JS/JQuery 没有删除它。

使用 Firebug，我可以看到没有为所有<div>生成的 s 分配边框半径属性。在您的 JS 中添加该属性应该可以解决问题。

Answer 2

实际上，我敢打赌它确实保持弯曲，只是有点快看。它看起来没有弯曲，因为您在制作动画时看到了它的中间，当然，它不是弯曲的（例如，您看到的是盒子的顶部，而不是左上角）。

将半径添加到父级div#s7，您应该进行设置。