Fatal编程技术网
  • html/
  • Html 使用ul上的边界半径，仅给出外部li的半径'；s

Html 使用ul上的边界半径，仅给出外部li的半径'；s

html css

Html 使用ul上的边界半径，仅给出外部li的半径'；s,html,css,Html,Css,也许答案很简单。但我要做的是在李家周围做一个弯曲的边界 因此，不仅是外部，也包括内部： 示例： 对 错： 不要介意这些差异。我要做的是弯曲内边框这是html： <ul> <li>Dashboard</li> <li>Voertuigen</li> <li>Klanten</li> <li>Factures</li> <li>Boetes</li&g

也许答案很简单。但我要做的是在李家周围做一个弯曲的边界

因此，不仅是外部，也包括内部：

示例： 对

错：

不要介意这些差异。我要做的是弯曲内边框这是html：

<ul>
  <li>Dashboard</li>
  <li>Voertuigen</li>
  <li>Klanten</li>
  <li>Factures</li>
  <li>Boetes</li>
  <li>Onderhoud</li>
 </ul>
这是直接从我的网站上撕下来的：

<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>
产生：

唯一弯曲的列表项是沿右边缘的（预先指定的）。所有其他李都有一个正方形半径

所以实际上，我发现唯一的方法就是简单地为你知道的沿着边缘的项目指定一个类，并绘制曲线

希望这有帮助！或者至少让你更接近你想要的答案：-）。

这是直接从我的网站上撕下来的：

<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>
产生：

唯一弯曲的列表项是沿右边缘的（预先指定的）。所有其他李都有一个正方形半径

所以实际上，我发现唯一的方法就是简单地为你知道的沿着边缘的项目指定一个类，并绘制曲线

希望这有帮助！或者至少让你更接近你想要的答案：-）。

你必须为第一个li的上角和最后一个li的下角设置边界半径。实现这一点的一种可能性是使用第一个子项和最后一个子项，因此如果munu项目是动态的，它也会起作用。

您必须为第一个li的上角和最后一个li的下角设置边界半径。实现这一点的一种可能性是使用第一个子项和最后一个子项，因此如果munu项是动态的，它也会起作用。

好的，下面是解决方案：

您将
位置设置为相对于
li
的
位置，并给它们一个负的
z索引
，将它们放在边框后面

CSS
HTML

    
仪表板

  • 伏尔图因
    • 

  • 克拉滕
    • 

  • 制造
    • 

  • 博茨
    • 

  • 昂德胡德
    • 

​

好的，下面是解决方案：



您将
位置设置为相对于
li
的
位置，并给它们一个负的
z索引
，将它们放在边框后面

CSS
HTML

    
仪表板

  • 伏尔图因
    • 

  • 克拉滕
    • 

  • 制造
    • 

  • 博茨
    • 

  • 昂德胡德
    • 

​

这就是我要做的：


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


这就是我要做的：


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


好的，一个与链接一起工作的解决方案：

HTML
​

​
 好的，一个与链接一起工作的解决方案：

HTML
​


​
 嗯，这不是我要找的。我正在寻找一个更优雅的解决方案；）嗯，这不是我要找的。我正在寻找一个更优雅的解决方案；）您需要使用
位置：relative
和
z-index:-1将HTML放入
`
中查看我的改进解决方案。从语义上讲，您的仪表板
li
不应该是列表元素：它不是一个项目，而是一个标题。因此，您真的应该使用
h1
、
h2
或
h3
。您能确认“Dashboard”是否是框的标题吗？它不是。这是您现在所在的页面^^^您需要将HTML放入
`
sSee我的改进解决方案，使用
position:relative
和
z-index:-1
从语义上讲，您的仪表板
li
不应该是列表元素：它不是一个项，而是一个标题。因此，您真的应该使用
h1
、
h2
或
h3
。您能确认“Dashboard”是否是框的标题吗？它不是。这是您现在所在的页面^^^我迫不及待地想知道这在所有浏览器中都是标准的-为webkit/gecko get键入两组边界半径属性一会儿后会很累！我同意你的解决方案。小提示：使用组合css:-moz边界半径：0px 0px 12px 12px；使用
：first-
和
：last child
选择器，就像在我的回答中一样。@Robbie与此同时，你可以使用css3generator.com（或类似的工具）让你的生活更轻松（我做了；）我迫不及待地等待，直到这成为所有浏览器的标准-为webkit/gecko get's Tirring键入两组边界半径属性，过一会儿！我同意你的解决方案。小提示：使用组合css:-moz边界半径：0px 0px 12px 12px；使用
：first-
和
：last child
选择器，如我的回答中所示。@Robbie同时，您可以使用css3generator.com（或类似工具）使您的生活更轻松（我做了；）更正。这将禁用菜单中的所有链接，因为它们位于边框项后面。>>那太糟糕了。虽然你没有提到它们是链接。对不起，我的错。没有提到，更正。这将禁用菜单中的所有链接，因为它们位于边框项后面。>>那太糟糕了。虽然你没有提到它们是链接。对不起，我的错。没提到，很好。我没想到支持圆角的浏览器也支持这些选择器！事实上，我也没有想到！我没有选择不提及旧浏览器不支持那些选择器：我只是忘了提及它。很好。我没想到支持圆角的浏览器也支持这些选择器！事实上，我也没有想到！我并没有选择不提及旧浏览器不支持这些选择器：我只是忘了提及它。

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



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



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



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



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