Question

我有一个水平渐变条：example

我想知道如何使它垂直而不是水平，高度约为20px。

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梯度生成器”，这是制作渐变的最佳工具，它将生成最多的crossbrowser方式。 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 );

如何使这个梯度垂直

5 个答案: