css3 实现一个线性渐变出现的问题？

.linear {
    position: relative;
    height: 1px;
    width: 100%;
    background: -webkit-linear-gradient(left,#fff 20%,#000 60%,#fff 20%);
}

结果就变成了这样：

不知道哪里出现了问题？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS3 Linear Gradients</title>
<style>
.classname {
    background: -webkit-linear-gradient( 90deg, #ffffff 10%, #bdbdbd 50%, #ffffff 90%) ;
    background: -o-linear-gradient( 90deg, #ffffff 10%, #bdbdbd 50%, #ffffff 90%) ;
    background: -moz-linear-gradient( 90deg, #ffffff 10%, #bdbdbd 50%, #ffffff 90%) ;
    background: linear-gradient( 90deg, #ffffff 10%, #bdbdbd 50%, #ffffff 90%) ;
    padding:10px 0;
    text-align:center;
}

</style>
</head>
<body>
<div class="classname">
    CSS Gradient
</div>
</body>
</html>

兼容性: IE10及以上

为什么是20%-60%-20%而不是20%-60%-80%，哈哈哈哈
它是个0到1的值用百分比标示坐标从0%右边到100%

为什么是20%-60%-20%而不是20%-60%-80%，哈哈哈哈

用法：-webkit-linear-gradient(left,#fff 20%,#000 60%, #fff);

颜色断点后面跟着百分比，是整个线性距离的百分比，所以，最前面应该是 0%，最后是 100%，其余百分比依次递增。
0% 与 100% 可以省略不写。

楼主看这里~~ https://jsfiddle.net/hanyang/x4udcmfj/

【热门文章】