css背景色渐变（实例）

1、linear-gradient线性渐变，语法：linear-gradient(direction,color 1,color 2...)

direction：用角度值指定渐变方向（或角度）
color：指定渐变起止颜色。

位置参数写在color之后，中间用空格隔开
用长度值或者百分比指定起止色位置。不允许负值。

 to right：设置渐变从左往右。相当于90deg：

 background-image: linear-gradient(to right,#f59ed1 0%,#62b5ff 100%)

 to left：设置渐变从右往左。相当于270deg：

 background-image: linear-gradient(to left,#f59ed1 0%,#62b5ff 100%)

  to bottom：设置渐变从上到下。相当于180deg，默认值：

 background-image: linear-gradient(to bottom,#f59ed1 0%,#62b5ff 100%)

 to top：设置渐变从下往上。相当于0deg：

 background-image: linear-gradient(to top,#f59ed1 0%,#62b5ff 100%)

多个颜色参数：

background-image: linear-gradient(to right,#f59ed1 0%,#62b5ff 50%,#4db949 100%);

2、radial-gradient径向渐变语法：radial-gradient(shape size at position，start-color,...,last-color)

shape：确定圆的类型

• ellipse (默认): 指定椭圆形的径向渐变。
• circle ：指定圆形的径向渐变

size：定义渐变的大小，可能值：

• farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
• closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
• closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
• farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边

position：定义渐变的位置。可能值：

• center（默认）：设置中间为径向渐变圆心的纵坐标值。
• top：设置顶部为径向渐变圆心的纵坐标值。
• bottom：设置底部为径向渐变圆心的纵坐标值。

start-color,...,last-color：用于指定渐变的起止颜色。

  圆形径向渐变:

background-image: radial-gradient(pink 20%, #8df 60%, #fff 80%);

  加尺寸径向渐变:

background-image: radial-gradient(

closest-corner at 60% 55%,rgb(255, 183, 0),rgb(41, 128, 0), rgb(0, 255, 255) 

);