爲什麼這個div的子元素沒有邊界半徑？

Question

我正在爲我的某個網站設置一個設置菜單，並且其中的.line div頂部沒有border-radius。

這是正常的樣子：

當我將鼠標懸停在由於某種原因，它沒有邊界半徑的第一個（也是最後一個）：

這裏是我的CSS：

<style type="text/css"> 
    #prefs_tab { 
    color: black; 
    background: white; 
    padding: 6px; 
    border: 1px solid black; 
    border-top: 0 !important; 
    border-bottom-right-radius: 10px; 
    border-bottom-left-radius: 10px; 
    cursor: pointer !important; 
    position: absolute; 
    top: 0; 
    left: 10px; 
    height: 20px; 
    } 
    #settings { 
    position: absolute; 
    top: 35px; 
    left: 10px;; 
    border: 1px solid black; 
    background: #fff; 
    border-radius: 10px; 
    width: 130px; 
    } 
    .line { 
    padding: 5px; 
    vertical-align: middle; 
    border-bottom: 1px solid black; 
    cursor: pointer; 
    } 
    .line:hover { 
    background: #ccc; 
    } 
</style> 

而且，我的HTML：

<div id="prefs_tab">Preferences</div> 
<div id="settings" style="display: none;"> 
    <div class="line" id="snow_off">Turn snow off</div> <!--will turn to "turn snow on" when clicked --> 
    <div class="line" id="hide_bar">Hide bottom bar</div> 
    <div class="line" id="music_on" style="border-bottom: 0 !important;">Turn music off</div> 
</div> 

我沒有看到我做錯了什麼。無論如何解決這個問題，而不必將border-radius添加到這兩個框？

Answer 1

這是因爲.line沒有應用border-radius，它溢出了容器。在容器上設置overflow: hidden，它將起作用。見http://jsfiddle.net/Xhrx8/