为什么这个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/