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%为渐变渲染区域,所前所后卫各自纯色
如果需要实色叠加,每个值需要设置两次,即起点和终点
兼容性
基本妥了,当然除了老IE(11以下)这个老顽固,放心的造轮子吧