Question

为什么要反转较高元素上background设置的较低元素的border-radius属性？

我有这个HTML代码：

<div class="wrapper">
    <div class="content">
        <div class="header">Title</div>
        <div class="form"></div>
    </div>
</div>

这个CSS代码：

.wrapper {
    background: none repeat scroll 0 0 #F8F8F8;
    border-radius: 5px 5px 5px 5px;
    height: 250px;
    left: 100px;
    overflow: visible;
    position: absolute;
    top: 10%;
    width: 400px;
    z-index: 10000

    .header {
        background: none repeat scroll 0 0 #222222;
        border-top-left-radius: 5px;
        box-shadow: 0 0 5px #444444;
        position: relative;
        z-index: 1;
    }
}

结果是顶部没有border-radius，只是在底部。如果我删除了background类的.header属性，则border-radius可以在所有四个方面都有效。这有什么问题？

Answer 1

您正在将选择器嵌套在其他内部，这是错误的。试试这个。

.wrapper {
    background: none repeat scroll 0 0 #F8F8F8;
    border-radius: 5px 5px 5px 5px;
    height: 250px;
    left: 100px;
    overflow: visible;
    position: absolute;
    top: 10%;
    width: 400px;
    z-index: 10000
}
    .header {
        background: none repeat scroll 0 0 #222222;
        border-top-left-radius: 5px;
        box-shadow: 0 0 5px #444444;
        position: relative;
        z-index: 1;
    }

这必须奏效，如果你在任何一个子div上应用任何背景颜色，那么你必须明确设置它的角半径..

Answer 2

检查

http://jsfiddle.net/arunberti/LtRUu/

.wrapper {
    background: none repeat scroll 0 0 red;
    border-radius: 5px 5px 5px 5px;
    height: 250px;
    left: 100px;
    overflow: visible;
    position: absolute;
    top: 10%;
    width: 400px;
    z-index: 10000;
    color:red;
}
    .header {
        background: none repeat scroll 0 0 #222222;
        border-top-left-radius: 5px;
        box-shadow: 0 0 5px #444444;
        position: relative;
        z-index: 1;
    }

背景反转border-radius

2 个答案: