CSS3渐变

一、线性渐变

通过background-image: linear-gradient(...)设置线性渐变

语法： linear-gradient(direction,color1,color2, . . )

direction：渐变方向，默认从上到下，可选值：

简单选取：

  ① to right（从左到右）② to left（从右到左）

  ③ to top（从下到上） ④ to bottom（从上到下）

组合选取： to right bottom（左上角->右下角）等

角度选取：45deg（向45度方向渐变）等

案例：

① 设置一个从上到下的粉色向红色的渐变背景

background-image: linear-gradient(pink, rgba(255, 0, 0, 0.842));

② 设置一个从左上角到右下角的粉色到紫色的渐变背景

background-image: linear-gradient(to right bottom,pink, rgba(111, 0, 255, 0.842));

二、径向渐变

通过background-image: radial-gradient(...)设置径向渐变

语法： radial-gradient(shape, color1 , color2, . . . )

shape：代表从内向外渐变的形状，默认值为ellipse

可选值有：circle（圆形）、ellipse （椭圆）

案例：

设置一个圆形的径向渐变

background-image: radial-gradient(circle,white, rgb(223, 18, 162));