樣式化的垂直線

我想打一個垂直線看起來像這樣：樣式化的垂直線

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/

它很接近，但它在行尾沒有「淡出」。

有什麼建議嗎？

在此先感謝！

來源

2013-08-23 kfirba

對我來說看起來很好（linux上的firefox） –

如果你的背景是白色，淡出就好了。這就是說...而不是使用十六進制代碼爲您的顏色，切換到RGBA。 A代表alpha，這意味着您可以在顏色上設置透明度。 0和1之間的任何值都可以用於alpha值。 0表示完全透明。 – Michael

使用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 */

來源

2013-08-23 14:49:29 Enthusiasmus

賓果！非常appriciated！ – kfirba

你會希望添加其他的停止點，即

background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFFFFF), to(#CFCFCF), to(#FFFFFF));

，導致：

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

這是值得看的MDN看色站如何線性漸變工作：https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

來源

2013-08-23 14:49:18

這將創建您要查找的行並將其放置在頁面中間。只需調整線寬的寬度，從上到下調整行高度的高度，在行開始前調整行距的上限，然後將顏色設置爲您想要的值。

body:after { 
    content:""; 
    position: absolute; 
    z-index: 1; 
    top:50%; 
    bottom:0; 
    left:50%; 
    border: 0; 
    height: 80%; 
    width:1px; 
    background: #333; 
    background-image: 
     -webkit-linear-gradient(top, #ccc, #333, #ccc); 
     background-image: -moz-linear-gradient(top, #ccc, #333, #ccc); 
     background-image: -ms-linear-gradient(top, #ccc, #333, #ccc); 
     background-image: -o-linear-gradient(top, #ccc, #333, #ccc); 
    }

來源

2014-04-11 20:50:06 davidcondrey

樣式化的垂直線

回答

相關問題