CSS border-radius 也包含内部元素

Question

我有两个应用了 border-radius 属性的面板。两个面板内部都有元素，有自己的背景颜色和边框。两个面板都是可滚动的。在第一个面板的情况下，当 div 滚动时，背景颜色和边框接受容器的边框半径作为边缘，而在第二个面板中，内部元素的边框和背景颜色与其直边重叠。为什么？

行为面板::

#coursepack .corecol .extention .dirpanel {
    background-color:#222;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    height:322px;
    width:304px;
    border:1px solid #AAA;
    overflow:hidden;
}

行为不端的面板::

#coursepanel .opsextention {
    position:absolute;
    width:320px;
    height:410px;
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
    -moz-border-radius-topright:10px;
    -moz-border-radius-bottomright:10px;
    z-index:2;
    opacity:0.80;
    left:358px;
    top:20px;
    background-color:#222;
  -webkit-box-shadow: 0px 0px 10px #FFF;
  -moz-box-shadow: 0px 0px 10px #FFF;
  box-shadow: 0px 0px 10px #FFF;
  overflow:hidden;
}

解决 fiddle 问题 http://jsfiddle.net/3V8T8/5/注意边界穿透 Angular 落

这是一个显示两者的 fiddle 。第二个显示工作圆 Angular ，但我看不出有什么区别 http://jsfiddle.net/3V8T8/10/

Answer 1

从 .opsextention .teetime 类中删除高度和行高，然后使用 padding:10px 25px 10px 25px 将其隔开，灰线不会超出 Angular 落