Javascript 使用CSS的底角半径效果

我之前的问题已经结束了，但我肯定我被误解了。我将再次复制该问题，因此请不要关闭is，因为我有一个特定的问题

我将构建一个选项卡式菜单，如下所示：

因此，我想知道您是否可以建议是否有一种方法可以使用纯CSS构建它，或者其他任何方法，这样代码和CSS都是干净的。一行中可能有10-15个选项卡

可能还会有下拉列表

因此html部分可能如下所示：

<ul>
   <li><a href="">Some Text</a></li>
   <li><a href="">Some Text</a></li>
   <li><a href="">Some Text</a>
       <ul>
         <li><a href="">Some Text</a></li>
         <li><a href="">Some Text</a></li>
         <li><a href="">Some Text</a></li>
       </ul>
   </li>
</ul>

谢谢

编辑

我在创建选项卡方面没有问题，我知道如何在菜单项上创建顶部半径，以及如何使用CSS进行渐变，但不知道如何在所选菜单项上实现底部“拐角半径”效果。

有可能只使用CSS构建这样的菜单吗？还是我必须使用图像

---

web上的所有示例和示例都在底部四舍五入，但在底部没有类似效果。

使用此CSS边框半径生成器

---

它将根据您的要求生成css

如果活动选项卡和非活动选项卡的背景色不是渐变色，则可以使用纯CSS实现

---

然而，如果标签有渐变背景颜色，比如你发布的屏幕截图，那么就需要图像。

Mikey，这在CSS中是一件非常困难的事情，因为没有办法进行排除

一种解决方案是在psuedo元素之前和之后使用透明背景和足够厚的边界作为底部外部弯曲部分。下面是一个简单的双色示例：

---

这里的关键部分是使边框颜色为红色。如果需要，可以隐藏此元素的溢出以收紧底线。考虑到你的设计，这项技术应该只进行最小的调整。

正如Hans所说，使用纯css来实现这一点是很困难的（这就是梯度问题）。我相信大多数网站都使用图像，如果你想让它简单，可以使用图像。

但我肯定你现在没有时间：p 我所能想到的最好的解决方案是使您的选项卡标题

position:relative

，而不是将：before和：after内容与position:relative添加到包含图形元素的背景图像中。对于额外的优化，我建议将它们放在一个文件夹中。因此：

是的，这是可能的 你在em中提到的边界半径或%类似于此

border-radius: 10px/30px; /* horizontal radius / vertical radius */
border-radius: 1em/5em;

---

像dis这样的检查可能是通过使用dis方式获得的

我相信这种技术在梯度上是不可能的。这是真的，克里斯托夫。然而，在上面的设计中，看起来梯度可能在外缘开始之前结束。如果是这种情况（或者如果设计师愿意扩展纯色），那么这将起作用。你的意思是边界模块lvl4，没有css4。w3schools很可能是链接到……我知道的足够多，可以看出我链接到的是我想说的。在css2.1之后，css规范的所有部分都在模块中开发。有些正好有版本号3，有些则有其他版本号。动画已引入“css3”，但处于“1级”。由于模块的开发速度不同，所以不能这样说。请阅读关于学校的文章。还有一些更好的资源。。我同意克里斯托夫的看法。。汉斯说，如果只使用单色，这是可能的。对于梯度，这是不可能的。。

border-radius: 10px/30px; /* horizontal radius / vertical radius */
border-radius: 1em/5em;