background - 背景反转边界半径

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财产，那么所有四个方面的作品。这里有什么问题？.headerborder-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;
    }