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以下）这个老顽固，放心的造轮子吧
