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/

您将position设置为li的相对值，并将它们设为负值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;
}

Answer 4

这是从我的网站直接撕掉的：

<div class='header'> 
        <ul><li><a href="/qrpsdrail/">Home</a></li><li><a href="/qrpsdrail/about">About</a></li></ul> 
        <ul class="right"> 
          <li> 
            <a href="/qrpsdrail/login">Login</a> 
          </li> 
          <li> 
            <a href="/qrpsdrail/signup" class="right">Register</a> 
          </li> 
        </ul> 
</div>

相应的CSS：

.header ul {
    float: left;
    list-style: none;
    margin: 0 0 0 140px;
}

.header ul.right {
    float:right;
}

.header li {
    float: left;
    font-size: 14px;
    margin: 0;
    padding: 0;
    height: 25px;
}

.header a.right {
    background: url('/button.jpg') #1463A3;
    display: block;
    float: left;
    margin: 0;
    padding: 10px 10px;
    text-decoration: none;
  -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
}

哪个产生： hover image http://soggymilk.com/images/hover.png

唯一得到弯曲的列表项是沿着右边缘的那些（预先指定的）。所有其他li都有一个方形半径。

所以，我发现这样做的唯一方法就是简单地为你知道将沿着边缘的项目指定一个类，然后对它们进行曲线化。

希望这有帮助！或者至少让你更接近你正在寻找的答案： - ）。

Answer 5

您必须将边框半径设置为第一个li的顶角和最后一个li的底角。实现这一目标的一种可能性是使用第一胎和最后一胎，因此如果munu-items是动态的，它也会起作用。

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

5 个答案:

HTML

CSS

CSS

HTML