0

在我的网站上，我有一个从#52b152顶部#006600到底部的渐变绿色菜单。我想用这样一个适当的分隔符垂直划分我的菜单选项：http: //dns.themeister.se/menu.png

分隔线看起来像被压进去了，我不知道那个“效果”叫什么或者你是怎么做到的，这就是我在这里的原因。任何人都知道如何或知道我需要使用的颜色代码来制作像链接上的菜单这样的分隔符？

4

3 回答 3

0

对于纯 CSS 答案，您可以在各个导航元素上使用边框来实现此效果。这很好，因为您可以轻松控制着色，并稍后在另一个项目中重用代码：

http://jsfiddle.net/22B3C/8/

CSS 菜单分隔线

假设您有一个菜单，例如：

<ul>
<li><span class="inset">Item</span></li>
<li><span class="inset">Item</span></li>
<li><span class="inset">Item</span></li>
</ul>

你可以这样设计它：

ul {
    background: -webkit-gradient(linear, 0 100%, 0 0, from(#99cc33), to(#76ac17));
    background: -webkit-linear-gradient(#99cc33 0%, #76ac17 100%);
    background: -moz-linear-gradient(#99cc33 0%, #76ac17 100%);
    background: -o-linear-gradient(#99cc33 0%, #76ac17 100%);
    background: linear-gradient(#99cc33 0%, #76ac17 100%); /* W3C */
    border-top: 1px solid #B5F23C;
    border-bottom: 1px solid #679314;
}

ul li { 
    display: inline-block;
}

ul li span { 
    padding: 12px 24px; 
    color: white;
    text-shadow: -1px -1px 2px #679314, 1px 1px 1px #B5F23C;
    display: block;
}

ul li span {
    border-left: 1px solid #99cc33;
    border-right: 1px solid #76ac17;
}
于 2013-05-11T03:09:23.300 回答
0

无论菜单栏的高度是图像，都可以创建一个 2px 的宽度。如果您放大该图像，您可以看到它只有 2 种纯色，并排。

在每个菜单项的末尾，将图像放入，您将获得所需的效果！

于 2013-05-11T02:34:47.717 回答
0

将分隔线作为背景图像的一部分包含在内不是一个好主意。例如，如果您的文本调整大小，您将遇到麻烦。在 LI 上使用左右边框很容易创建这种效果。这是一个示例，起诉您的原始图像（但删除了潜水员：

http://codepen.io/anon/pen/Iylog

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

ul {list-style: none; overflow: hidden; background: url(http://pageaffairs.com/sp/so-16493171/bg.gif) repeat-x 0 0; margin:0; padding: 0; display: table;}
li {float: left;}
li:not(:last-child) {border-right: 1px solid rgba(256,256,256, 0.2);}
li:not(:first-child) {border-left: 1px solid rgba(0,0,0, 0.2);}
li a {line-height: 45px; display: block; color: white; text-decoration: none; padding: 0 20px;}
li a:hover, li a:focus {background: rgba(0,0,0,0.2); text-shadow: 0 0 20px rgba(256,256,256, 0.8);}

</style>

</head>
<body>

<ul>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
</ul>

</body>
</html>
于 2013-05-11T03:29:28.797 回答