CSS 边框半径也包含内部元素答案

【问题标题】：CSS border-radius contain inner elements as wellCSS 边框半径也包含内部元素
【发布时间】：2011-10-05 13:30:10
【问题描述】：

我有两个应用了边框半径属性的面板。两个面板内部都有元素，它们有自己的背景颜色和边框。两个面板都是可滚动的。在第一个面板中，当 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/

【问题讨论】：

您能否提供 html 和/或理想情况下的工作示例。
这是一个小提琴，显示了一个不起作用的小提琴。注意边界穿过容器的角落jsfiddle.net/3V8T8/5
我在这里就堆栈溢出提出了同样的问题。还没有找到合适的答案。这似乎是所有浏览器都发生的疏忽。
Chrome 和 Firefox，蓝框留在里面
我看不出有什么问题。可以发个截图吗？

标签： css

【解决方案1】：

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

【讨论】：