背景渐变色


/* 背景渐变色 */
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()

举报

© 著作权归作者所有


0