css3 实现一个线性渐变出现的问题？
.linear {
position: relative;
height: 1px;
width: 100%;
background: -webkit-linear-gradient(left,#fff 20%,#000 60%,#fff 20%);
}
结果就变成了这样：
不知道哪里出现了问题？
慕姐4208626浏览 801回答 2
2回答
-
喵喵时光机
<!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及以上 -
泛舟湖上清波郎朗
用法：-webkit-linear-gradient(left,#fff 20%,#000 60%, #fff);颜色断点后面跟着百分比，是整个线性距离的百分比，所以，最前面应该是 0%，最后是 100%，其余百分比依次递增。0% 与 100% 可以省略不写。
随时随地看视频慕课网APP
相关分类
CSS3