如何製作這樣的分隔線？

在我的網站上，我有一個漸變綠色菜單，從頂部的#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

如何製作這樣的分隔線？

回答

相關問題