背景渐变色
/* 背景渐变色 */
background: -webkit-linear-gradient(top,#4BC9FF, #3270F3); /* Safari 5.1 - 6 */
background: -o-linear-gradient(bottom,#4BC9FF, #3270F3); /* Opera 11.1 - 12*/
background: -moz-linear-gradient(bottom,#4BC9FF, #3270F3); /* Firefox 3.6 - 15*/
background: linear-gradient(to bottom, #4BC9FF, #3270F3); /* 标准的语法 */
参数详解,如下:
例1:渐变轴为45度,多个颜色平均分布
background: linear-gradient(45deg, #3f87a6, #ebf8e1, #f69d3c);
例2:渐变轴90度,多个颜色时,可设置每个颜色的起始渐变位置
background: linear-gradient(90deg, #3f87a6 10%, #ebf8e1 60%, #f69d3c 90%);
常用渐变方向:180度是垂直方向从上到下
90度是水平方向从左到右
MDN官网:https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/linear-gradient()