渐变linear-gradient中的百分比

1、常规垂直线性渐变，颜色从#fb3 过渡到#58a：

background: linear-gradient(#fb3, #58a);​

2、指定方向渐变

background: linear-gradient(to right, #ccc,#58a);​

3、说一下百分比得了，遇坑了细研究一番

 background:linear-gradient(red 30%,orange 50%);

没图没真相，话语来叙述，这里的百分比指的不是要渲染的区域是30%，而是指的从指定的百分比开始渲染，第一个值大于0%，前面的颜色会默认为第一个颜色，第二个百分比指定从50%开始渲染，如果后续没参数，将至结尾。不设置百分比时，会默认将所有填写的值等额分开。百分比渐变的区域为二值之间，30%-50%为渐变渲染区域，所前所后卫各自纯色

如果需要实色叠加，每个值需要设置两次，即起点和终点

兼容性

image.png

基本妥了，当然除了老IE（11以下）这个老顽固，放心的造轮子吧