Question

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

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

Answer 1

无论菜单栏的高度是图像，都要设置2px的宽度。如果放大该图像，您可以看到它只是两种纯色，并排。

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

Answer 2

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

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

CSS Menu Dividers

假设您有一个菜单：

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

Answer 3

将分隔线作为背景图像的一部分包含在内并不是一个好主意。例如，如果您的文字调整大小，您将遇到麻烦。在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>

如何制作这样的分隔线？

3 个答案: