0

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プロパティを削除すると、 4 つの側面すべてで機能します。ここで何が問題なのですか？.headerborder-radius

4

2 に答える 2

1

セレクターを other 内にネストしていますが、これは間違っています。これを試して。

.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のいずれかに背景色を適用する場合は、コーナー半径を明示的に設定する必要があります..

于 2013-08-01T09:28:49.910 に答える