CSS3渐变详解

1.线性渐变（linear-gradient）

1.1 方向、角度以及多颜色

注意：颜色必须是两个颜色节点以上

①默认方向（上下）

#demo2{
            width: 100px;
            height: 50px;
            border-radius: 8px;
            background:linear-gradient(rgb(231, 121, 207),rgba(211, 142, 238, 0.582))
        }

效果：

②从左自右

#demo1{
            width: 100px;
            height: 50px;
            border-radius: 8px;
            background:linear-gradient(to right,rgb(28, 197, 70),rgba(115, 180, 233, 0.582))
        }

效果：

③左上角往右上角（对角）

 #demo3{
            width: 100px;
            height: 50px;
            border-radius: 8px;
            background:linear-gradient(to bottom right,rgb(192, 81, 81),rgb(72, 92, 182))
        }

效果：

④多颜色

  #demo4{
            width: 100px;
            height: 50px;
            border-radius: 8px;
            background:linear-gradient(red,blue,green)
          }

效果：

⑤角度变化

导读：角度问题

⑥设置角度（例如45deg，左下自右上）

  #demo{
            width: 100px;
            height: 50px;
            border-radius: 8px;
            background:linear-gradient(45deg,rgba(47, 207, 7),rgb(209, 209, 97))
          }

效果：

2.径向渐变（radial-gradient）

2.1 径向样式的变化

① 默认（ellipse）：椭圆
② 圆形（circle）

#demo6{
            width: 100px;
            height: 50px;
            border-radius: 8px;
            background:radial-gradient(red,yellow)
          }

效果：

 #demo5{
            width: 100px;
            height: 50px;
            border-radius: 8px;
            background:radial-gradient(circle,red,yellow)
          }

效果：

③设置颜色百分比

 #demo7{
            width: 100px;
            height: 50px;
            border-radius: 8px;
            background:radial-gradient(ellipse,rgb(112, 98, 196) 5%,rgb(201, 201, 34) 80%)
          }

效果：

总结：
①：使用渐变必须要两个以上的颜色节点
②：颜色占比两种渐变样式一样适用