背景顛倒border-radius

爲什麼顛倒background屬性的下層元素border-radius設置在更高的元素上？背景顛倒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在頂部，只是在底部。如果我刪除.header類的background屬性，border-radius可以在所有四個方面工作。這裏有什麼問題？

來源

2013-08-01 Juuro

你現在的代碼顯示邊框半徑.. –

第一）有一個問題，大括號在CSS中。 – Farkhad

你在另一個嵌套選擇器，這是錯誤的。試試這個。

.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-01 09:28:49

謝謝！但我不明白這種行爲。它爲什麼這樣工作？ – Juuro

其簡單，你不能放置一個CSS選擇器內的其他CSS選擇器。 –

錯誤，是的，我可以，如果我寫SCSS。我的意思是爲什麼我必須爲具有'background'屬性的子元素再次設置'border-radius'？ – Juuro

入住這

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; 
    }

來源

2013-08-01 09:33:55

背景顛倒border-radius

回答

相關問題