html - 使用 border-bottom-left/right-radius 会产生不良结果

Question

在下图中，我有一个带有圆 Angular 的表单，但如果你仔细观察，底 Angular 有一些难看的重叠(某种白 Angular )

我尝试在背景上使用更大的 border-radius 并去掉背景，但看起来它不是背景而是元素本身，因为那没有做任何事情。

这是我的表单底部的 css 代码(按钮周围的灰色区域)

.formss #button_div{
    clear:both;
    height: 60px;
    width: 100%;
    border-top:1px solid #ddd;
    margin-top:5px;
    padding-top: 10px;
    text-align:center;
    background:rgba(51,51,51,0.8);
    -moz-border-radius-bottomleft: 19px;
    -moz-border-radius-bottomright: 19px;
    -webkit-border-bottom-left-radius: 19px;
    -webkit-border-bottom-right-radius: 19px;
    border-bottom-left-radius: 19px;
    border-bottom-right-radius: 19px;
}

我以前遇到过这个问题，我想一直做错了，但我不知道是什么。

编辑:jsFiddle --> http://jsfiddle.net/Z6pwR/4/

我不知道为什么文本输入会超出 fiddle 中的表单

Answer 1

我无法解释为什么您的解决方案无法正常工作，但如果您从 #agregar_instituto_div 中删除 overflow: hidden 属性并将其添加到子项/表单，问题就消失了。