CSS的底角半径效果

Question

我之前的问题已经结束，但我确信我被误解了。我会再次复制这个问题，所以请不要关闭，因为我有一个特定的问题。

我打算像这样构建一个标签式菜单：

所以我想也许你可以建议是否有一种方法可以使用纯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构建这样的菜单？或者我还是要用图像？

网上的所有样本和示例都在底部呈圆角，但在底部没有这样的效果。

Answer 1

Mikey，这在CSS中是一个非常棘手的事情，因为没有办法排除。

一种解决方案是在psuedo元素之前和之后使用，具有透明背景和足够厚的边框以充当底部外部弯曲部分。这是一个简单的双色示例： http://codepen.io/anon/pen/udfJc

这里的关键部分是边框颜色为红色。如果需要，您可以隐藏此元素的溢出以收紧底线。鉴于您的设计，这种技术应该只需要很少的调整。

Answer 2

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

但是，如果标签具有渐变背景颜色，例如您发布的屏幕截图，则需要图像。

Answer 3

正如Hans所说，使用纯css会很困难（并且存在梯度问题）。我相信大多数网站都使用图片，如果你想要它简单，是的，请使用图片。

Answer 4

CSS4 will support this但我确定你现在没有时间：P 我能想到的最佳解决方案是制作标题标题position:relative而不是添加：之前和之后的位置内容：相对于包含图形元素的背景图像。为了进一步优化，我会重新将它们放入sprite。所以：

.tab-title{position:relative;} 
.tab-title:before,.tab-title:after{content:" "; width:5px; height:5px; position:absolute; backgrund-image:url(tab_graphic_elem.png);}
.tab-title:after{background-position:5px 0;}

Answer 5

是的，有可能  边界半径你在em中提到或像这样的％。

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

你可以通过使用dis方式得到你喜欢的消息

Answer 6

使用此 CSS BORDER RADIUS GENERATOR ...

http://border-radius.com/

它将根据您的要求生成css ..