如何制作这样的分隔线？

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

分压器看起来像压入，我不知道是什么“效应”被称为或如何使它，这就是为什么我在这里。任何人都知道如何或知道我需要用来制作分隔线的颜色代码，如链接上的菜单？

来源

2013-05-11 TheMeisterSE

无论菜单栏的图像高度是多少，都可以制作一个2像素的宽度。如果您放大该图像，则可以看到它只是2个纯色，并排显示。

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

来源

2013-05-11 02:34:47

但问题是，图像中使用的菜单是蓝色的，我使用的一个是绿色的。 – TheMeisterSE 2013-05-11 02:36:14

所以你不能只是改变分隔图像的颜色？或者从头开始制作自己的分隔图像;它并不完全复杂 – 2013-05-11 02:44:50

你可以用内部容器做到这一点，并给左右边界1px的纯色给予 – 2013-05-11 02:54:37

对于纯粹的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; 
}

来源

2013-05-11 03:09:23

你的jsFiddle链接是别的。检查它... – 2013-05-11 03:17:44

Woops，谢谢！我的剪贴板混在一起了！ – 2013-05-11 03:22:38

但是，在Google Chrome中，它无法正确显示。 “左”和“右”边界之间存在差距。 – 2013-05-11 03:30:13

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

如何制作这样的分隔线？

回答

相关问题