html - 设计垂直线

Question

我想制作一条垂直线，如下所示:

http://i41.tinypic.com/2na44n7.png

我试过下面的代码:

div.vertical-line{
    float:right;
    width:5px;
    background-color:black;
    margin-right:20px;
    background: #FFFFFF;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFFFFF), to(#CFCFCF));
    background: -webkit-linear-gradient(#FFFFFF, #CFCFCF);
    background: -moz-linear-gradient(#FFFFFF, #CFCFCF);
    background: -ms-linear-gradient(#FFFFFF, #CFCFCF);
    background: -o-linear-gradient(#FFFFFF, #CFCFCF);
    background: linear-gradient(#FFFFFF, #CFCFCF);
    -pie-background: linear-gradient(#FFFFFF, #CFCFCF);
    behavior: url(/pie/PIE.htc);
}

但结果并不如预期。 这是结果: http://jsfiddle.net/rLyyc/

它很接近，但它不会在行尾“淡出”。

有什么建议吗？

提前致谢!

Answer 1

使用 this generator ，我为你准备了这个:

background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #c6cbd2 50%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#c6cbd2), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#c6cbd2 50%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#c6cbd2 50%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#c6cbd2 50%,#ffffff 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#c6cbd2 50%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */