线性渐变的用处

线性渐变

今天只分享linear-gradient，因为实用性更强一点

如果一个盒子的背景色要像进度条,如下图:

当然，有很多种方式去做，比如定位，或者在盒子里面再放一个红色的盒子，宽度设置为百分比，OK，当然没问题

而我觉得使用线性渐变可能更简单方便一点

那就直接开车了。。。。

1 2 3 4 5 6 7 8 9 10

* {margin:0;padding:0;} .box { width: 300px; height: 40px; border: 1px solid #000; background: linear-gradient(to right,red 20%, #fff 20%); box-sizing: border-box; margin: 30px auto; /*background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */*/ }

其中最主要的一句还是linear-gradient。。

1	<div class="box"></div>

这样就只要控制red 的百分比就可以实现上图的效果了

原文:大专栏  线性渐变的用处