前端开发学习笔记–CSS 渐变效果

发布于 2018-04-25  167 次阅读


linear-gradient 属性实现背景颜色的线性渐变功能

 

linear-gradient 有三个参数,顺序为方位, 起始色, 末尾色。其中,起始色, 末尾色这两个为必选参数

例:

background-image: linear-gradient(to left,red,green);

//设置从左边为起始点,起始颜色为红色,末尾颜色为绿色的渐变效果

 

可以设置多种颜色的线性渐变

例:

background-image: linear-gradient(to lef,red,green,orange,blue);

 

设置多种颜色的线性渐变的位置,可以用百分比设置

例:

background-image: linear-gradient(to lef,red1%,green12%,orange56%,blue100%);

//默认起始色的百分比位置是 0%,末尾色的百分比位置是 100%

 

可以通过角度设置方位,0~360deg,负值也可以

例:

background-image: linear-gradient(-90deg,red1%,green12%,orange56%,blue100%);

 

repeating-linear-gradient 可以设置重复渐变属性值

例:

background-image:repeating-linear-gradient(-90deg,red1%,green12%,orange56%,blue100%);

 

radial-gradient 属性值可以从一个点向四周发散的方式扩展,即径向渐变,也叫放射性渐变

radial-gradient 有三个参数,顺序为方位, 起始色, 末尾色。其中,起始色, 末尾色这两个为必选参数

例:

background-image: radial-gradient(circle at right, red, green);

//可设置渐变形状值有 circle(圆形),ellipse(椭圆形,默认值),渐变方向也可设置
background-image: radial-gradient(circle farthest-side,  red, green);

//可设置发散的距离,也就是圆的半径

 

 

设置发散的距离的值:

closest-side:指定径向渐变的半径长度为从圆心到离圆心最近的边;

closest-corner:指定径向渐变的半径长度为从圆心到离圆心最近的角;

farthest-corner:指定径向渐变的半径长度为从圆心到离圆心最远的角;

farthest-side:指定径向渐变的半径长度为从圆心到离圆心最远的边;