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

解决小提琴http://jsfiddle.net/3V8T8/5/注意边界穿透角落

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

Answer 1

从.opsextention .teetime类中删除高度和行高，然后使用填充：10px 25px 10px 25px将其分开，灰线不会超出角落

CSS border-radius也包含内部元素

1 个答案: