如何使這一梯度垂直

Question

我有一個水平漸變條：example

我想知道，如何使它垂直的而不是水平的，約20像素的高度。

HTML：

<div class="seperator-gradient"></div> 

CSS：

.seperator-gradient { 
    width: 100%; 
    height: 10px; 
    border-bottom: background: #c4c4c4; 
    background: -moz-linear-gradient(left, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%); 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc)); 
    background: -webkit-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); 
    background: -o-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); 
    background: -ms-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); 
    background: linear-gradient(to right, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=1); 


} 

Answer 1

試試這個：

.seperator-gradient { 
    width: 100%; 
    height: 10px; 
    border-bottom: background: #c4c4c4; 
    background: -moz-linear-gradient(left, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%); 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc)); 
    background: -webkit-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); 
    background: -o-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); 
    background: -ms-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); 
    background: linear-gradient(to right, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=1); 
    transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    -webkit-transform: rotate(90deg); 

} 

這將旋轉你有90度。我接下來看到正確的方向，但如果情況正好相反，請將(90deg)更改爲(270deg)。

Answer 2

試試這個代碼：

background-image: -webkit-gradient(
    linear, 
    right bottom, 
    left bottom, 
    color-stop(0, #FAF5F5), 
    color-stop(0.55, #E0362D) 
); 
background-image: -o-linear-gradient(left, #FAF5F5 0%, #E0362D 55%); 
background-image: -moz-linear-gradient(left, #FAF5F5 0%, #E0362D 55%); 
background-image: -webkit-linear-gradient(left, #FAF5F5 0%, #E0362D 55%); 
background-image: -ms-linear-gradient(left, #FAF5F5 0%, #E0362D 55%); 
background-image: linear-gradient(to left, #FAF5F5 0%, #E0362D 55%); 

你可以使用不同的CSS梯度創作者也：d

Answer 3

這是我想出了（注意，百分比也許應該改變一點點如果你想讓它有這麼小的高度）。總之，對於大的高度，這看起來很棒：

JSFiddle

.seperator-gradient { 
    width: 100%; 
    height: 10px; 
    border-bottom: background: #c4c4c4; 
    background: -moz-linear-gradient(, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%); 
    background: -webkit-gradient(linear, center top, center top, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc)); 
    background: -webkit-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); 
    background: -o-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); 
    background: -ms-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); 
    background: linear-gradient(to right, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=1); 

} 

Answer 4

檢查「終極CSS梯度發生器」，這是爲了讓梯度的最佳工具，它會產生他們最跨瀏覽器的方式。 http://www.colorzilla.com/gradient-editor/

Answer 5

我不知道如果你想使酒吧垂直或梯度，所以我會回答兩個。如果你指的酒吧，然後更改：

width: 100%; 
height: 10px; 

到

width: 10px // or however wide you want it 
height: 20px 

如果你指的梯度必須是垂直的，使用：

.seperator-gradient { 
width: 100%; 
height: 10px; 
border-bottom: background: #c4c4c4; 
background: -moz-linear-gradient(top, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc)); 
background: -webkit-linear-gradient(top, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); 
background: -o-linear-gradient(top, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); 
background: -ms-linear-gradient(top, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); 
background: linear-gradient(to bottom, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0);