0

我之前的问题已结束，但我确定我被误解了。我将再次复制该问题，所以请不要关闭 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 构建这样的菜单？还是我必须使用图像？

网络上的所有示例和示例都在底部四舍五入，但在底部没有这样的效果。

4

6 回答 6

1

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

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

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

于 2013-04-04T07:46:48.703 回答
0

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

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

于 2013-04-04T07:20:03.167 回答
0

CSS4 将支持这一点，但我敢肯定你现在没有时间 :P 我认为最好的解决方案是让你的标签标题position:relative比添加 :before 和 :after 内容与 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;}
于 2013-04-04T09:40:57.990 回答
0

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

于 2013-04-04T08:55:50.963 回答
-1

是的，您可能在 em 或 % 中提到过边界半径，就像这样。

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

你 ckeck 喜欢 dis 可能你会通过使用 dis 方式得到

于 2013-04-04T11:25:55.513 回答
-2

使用这个CSS BORDER RADIUS GENERATOR ...

http://border-radius.com/

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

于 2013-04-04T07:04:27.887 回答