Использование border-radius на ul только с указанием радиуса для внешнего li

Question

Может быть, ответ действительно прост. Но то, что я пытаюсь сделать, это сделать изогнутую границу вокруг ли.

Так что не только снаружи, но и внутри:

Примеры: Право

справа http://img198.imageshack.us/img198/577/rightc.png

Неправильно:

неправильно 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

Вы должны установить радиус границы для верхних углов первого li и нижних углов последнего li. одна возможность достичь этого - использовать first-child и last-child, так что это также будет работать, если элементы munu являются динамическими.

Answer 5

Это скопировано прямо с моего сайта:

<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;
}

, который производит: изображение при наведении http://soggymilk.com/images/hover.png

И единственноеИзогнутые элементы списка (предварительно заданные) расположены вдоль правого края.Все остальные li имеют квадратный радиус.

Так что, на самом деле, единственный способ сделать это - просто указать класс для элементов, которые, как вы знаете, будут вдоль края, и изогнуть их.

Надеюсь, это поможет!Или, по крайней мере, приблизит вас к ответу, который вы ищете: -).