褪色边框（css）

Question

以下是我正在使用的图片：

我需要垂直菜单栏（左侧）下方的边框淡出（一个上升，另一个上下）。我如何让这两个边界淡出？现在看起来有点像块。我不想使用JavaScript，但我可能会做必要的事情（我试图尽可能减轻网站的重量）。

修改

褪色，我的确意味着超越空间，而不是时间。

Answer 1

你可以制作一堆1px高的积木，并且连续更亮的边框颜色。

（假设你的意思是“褪色”，就像在太空而不是时间）

Answer 2

您可以将两个淡出图像用作background-image

li.edge_top, li.edge_bottom {
  background-position: right;
  background-repeat: no-repeat;
}

li.edge_top {
  background-image: url:('fadeout_top.png');
}

li.edge_bottom {
  background-image: url:('fadeout_bottom.png');
}

Answer 3

您可以尝试使用高梯度PNG的新CSS3 border-right-image属性（http://www.css3.info/preview/border-image/）。但是，大多数浏览器都不会广泛支持这一点。您可能最好使用正确的渐变创建图像并将其设置为background-image和.edge_bottom css类上的.edge_top（务必从这些类中删除现有边框，太）

Answer 4

CSS3渐变拯救！

<强> Live Demo

注意：仅为Firefox设置渐变。我无法测试Webkit，但它应该完全相同。

Answer 5

这将删除它，旧浏览器不支持这些伪元素

ul.vertical_menu > li:first-child {
    border-right:none;
}
ul.vertical_menu > li:last-child {
    border-right:none;
}

http://jsfiddle.net/5Ceb5/