CSS3中linear-gradient属性的使用方法总结
导读：代码还是比较简单的: linear-gradient(65deg,#2b7ce7,#2b7ce750%,transparent0,transparent , linear-gradient(115deg,#2b7ce7,#2b7ce...
代码还是比较简单的:
linear-gradient(65deg,#2b7ce7,#2b7ce750%,transparent0,transparent),
linear-gradient(115deg,#2b7ce7,#2b7ce750%,transparent0,transparent)
但是理解起来还是需要一定基础的。
线性渐变linear-gradient
基本用法
background-image:linear-gradient(red,yellow,blue,green);
background-image:linear-gradient(rgba(255,0,0,.2),yellow,blue,green);
控制颜色渐变的方向(right,left,top,bottom)
/*
控制颜色渐变的方向
toright--从左向右
totop--从下到上
toleft--从右到左
tobottom---从上到下（默认值）
*/
background-image:linear-gradient(toright,red,yellow,blue,green);
background-image:linear-gradient(totop,red,yellow,blue,green);
background-image:linear-gradient(toleft,red,yellow,blue,green);
background-image:linear-gradient(tobottom,red,yellow,blue,green);
控制颜色渐变的方向(deg)
/*0deg=totop--从下到上*/
background-image:linear-gradient(0deg,red,yellow,blue,green);
/*基于0度顺时针旋转45deg*/
background-image:linear-gradient(45deg,red,yellow,blue,green);
/*基于0度逆时针旋转45deg*/
background-image:linear-gradient(-45deg,red,yellow,blue,green);
控制颜色渐变的方向(deg)
/*设置过渡颜色的起始位置*/
/*从过渡起始位置50px开始让红色和黄色之间产生颜色渐变效果*/
background-image:linear-gradient(toright,red50px,yellow,blue,green);
background-image:linear-gradient(toright,red50px,yellow50px,blue,green);
background-image:linear-gradient(toright,red50px,yellow50px,yellow100px,blue,green);
重复线性渐变：repeating-linear-gradient
background-image:linear-gradient(toright
,red0
,red50px
,yellow50px
,yellow100px
,red100px
,red150px
,yellow150px
,yellow200px);
/**与上面重复写渐变有相同的效果*/
background-image:repeating-linear-gradient(
toright
,red0
,red50px
,yellow50px
,yellow100px
);
本文转载自中文网
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： CSS3中linear-gradient属性的使用方法总结
本文地址： https://pptw.com/jishu/664604.html