在ul上使用border-radius，只给出外部li的半径

Question

也许答案真的很简单。但我想做的是在李的周围画一个弧形的边界。

因此，不仅是外部，还有内部：

示例:右

right http://img198.imageshack.us/img198/577/rightc.png

错误：

wrong http://img689.imageshack.us/img689/4957/wrongc.png

请不要介意这些差异。我想要做的就是让内边界弯曲，这是html：

<ul>
  <li>Dashboard</li>
  <li>Voertuigen</li>
  <li>Klanten</li>
  <li>Factures</li>
  <li>Boetes</li>
  <li>Onderhoud</li>
 </ul>

Css：

ul {
 list-style: none;
 -moz-border-radius: 12px;
 -webkit-border-radius: 12px;
 width: 140px;
 border: 10px solid #BEBEBE;
}

ul li {
 height: 40px;
 width: 140px;
 background: #E5E5E5;
}

Answer 1

好的，一个可以使用链接的解决方案：http://www.jsfiddle.net/MDXZG/6/

HTML

<div class="roundbox">
    <h3>Dashboard</h3>
    <ul>
        <li><a href="http://google.com">Voertuigen</a></li>
        <li>Klanten</li>
        <li>Factures</li>
        <li>Boetes</li>
        <li>Onderhoud</li>
    </ul>
</div>

CSS

为简洁起见，我省略了各种边界半径规范。

div.roundbox {
    border-radius: 15px;
    width: 120px;
    padding: 10px;
    background: #BEBEBE;
}

div.roundbox ul {
    list-style: none;
}

div.roundbox ul li {
    height: 40px;
    background: #E5E5E5;
}

div.roundbox ul li:last-child
{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

div.roundbox h3
{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

    height: 40px;
    background-color: #00BEE5;
}

​

​

Answer 2

好的，这就是解决方案：

http://www.jsfiddle.net/MDXZG/1/

您将li的position设置为relative，并给它们一个负的z-index，将它们放在边框后面。

CSS

ul {
    list-style: none;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    width: 140px;
    position:relative;
    z-index:1;
    border: 10px solid #BEBEBE;
}

ul li {
    height: 40px;
    position:relative;
    z-index:0;
    background: #E5E5E5;
}​

HTML

<ul>
    <li style="background-color: aqua;">Dashboard</li>
    <li>Voertuigen</li>
    <li>Klanten</li>
    <li>Factures</li>
    <li>Boetes</li>
    <li>Onderhoud</li>
</ul>​

Answer 3

这就是我要做的：

<ul>
  <li class="first">Dashboard</li>
  <li>Voertuigen</li>
  <li>Klanten</li>
  <li>Factures</li>
  <li>Boetes</li>
  <li class="last">Onderhoud</li>
</ul>

Css：

ul {
 list-style: none;
 -moz-border-radius: 12px;
 -webkit-border-radius: 12px;
 width: 140px;
 border: 10px solid #BEBEBE;
}

ul li {
 height: 40px;
 width: 140px;
 background: #E5E5E5;
}

li.first {
 -webkit-border-top-left-radius: 12px;
-webkit-border-top-right-radius: 12px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-topleft: 12px;
-moz-border-radius-topright: 12px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px; 
}

li.last {
 -webkit-border-top-left-radius: 0px;
 -webkit-border-top-right-radius: 0px;
 -webkit-border-bottom-right-radius: 12px;
 -webkit-border-bottom-left-radius: 12px;
 -moz-border-radius-topleft: 0px;
 -moz-border-radius-topright: 0px;
 -moz-border-radius-bottomright: 12px;
 -moz-border-radius-bottomleft: 12px;
 border-top-left-radius: 0px;
 border-top-right-radius: 0px;
 border-bottom-right-radius: 12px;
 border-bottom-left-radius: 12px;
}