为什么这个div的子元素没有border-radius？

Question

我正在为我的某个网站制作设置菜单，其中的.line div在顶部没有border-radius。

以下是正常情况：

当我因某种原因将鼠标悬停在第一个（和最后一个）上时，它没有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/