电话
13363039260
CSS3中linear-gradient属性的使用方法总结
2024-01-17 14:23 小编
代码还是比较简单的:
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
);
猜你喜欢
联络方式：
13363039260
微信二维码 