多彩多姿的线通过CSS

Question

<div class="border"></div>

.border {
    width: 100%;
    height: 6px;
    background: -webkit-linear-gradient(left, #2F2727 20%, #1a82f7 80%);
}

上面的代码生成了这条线，但它的淡出第一种颜色而不是另一种颜色的淡出。但我想要像上面那样的线。所以帮助我

Answer 1

.border {
    background: -webkit-linear-gradient(left, #2F2727 20%, #1a82f7 20%);
}

诀窍是在第一种颜色结束时开始第二种颜色。在此示例中，#2F2727颜色以20％结尾，#1a82f7颜色从20％开始。

Answer 2

您需要创建两个单独的DOM元素才能实现多色线。请参阅以下内容：

HTML：

<div class="border">
    <div></div>
    <div></div>
</div> 

CSS：

.border {
    height:6px
    width:100%;
    display:block;
    overflow:hidden;
}
.border div {
    height:6px;
}
.border div:first-child {
    width:30%;
    background-color:orange;
    float:left;
}
.border div:last-child {
    width:70%;
    background-color:black;
    float:left
}

查看实际操作：http://jsfiddle.net/NvQ7B/2/

Answer 3

你能不能做这样的事情：

.border {
    height:3px;
    border-left:200px solid #2F2727;
    background-color:#1a82f7;
}     

Answer 4

http://www.colorzilla.com/gradient-editor/#ff0000+0,ff0000+30,0a0e0a+30,0a0809+100;Custom

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