H5C3--线性渐变 linear-gradient，径向渐变radial-gradient，重复渐变radial-gradient

一.线性渐变

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             width: 300px;
 9             height: 300px;
10             /*渐变添加：方向，颜色1，颜色2，颜色3
11             渐变并不是一个单一的颜色，它不能使用color的方式添加，而需要使用image的方式添加，意味着添加语法添加的是背景图片
12             线性渐变：linear-gradient(方向，颜色1 位置，颜色2 位置)
13             方向：方向默认是垂直向下，如果想设置可以这样：
14                 to bottom:默认值，向下 180deg
15                 to top: 0deg
16                 to right: 90deg
17                 to left: 270deg
18                 角度值：
19                 位置：以百分比做为位置的单位*/
20             /*background-image: linear-gradient(90deg, red 50%,blue 100%);*/
21             background-image: linear-gradient(90deg, red,orange,yellow,green,rgb(0,255,255),blue,purple);
22         }
23     </style>
24 </head>
25 <body>
26 <div></div>
27 </body>
28 </html>

二.径向渐变

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             width: 300px;
 9             height: 200px;
10             /*radial-gradient:径向渐变，以某个点做为圆心点往外扩散
11             radial-gradient(形状 大小 位置,颜色1 位置1，颜色2 位置2.....)
12             形状：circle ellipse.如果开头是正方形，那么就会产生circle渐变，如果开头是椭圆，那么就会产生ellipse渐变
13             大小：
14                 closest-side:最近的边。会产生从指定圆心到最近的边的径向渐变
15                 farthest-side:最远的边。会产生从指定圆心到最近的边的径向渐变
16                 closest-corner:最近的角。会产生从指定圆心到最近的角的径向渐变
17                 farthest-corner:最远的角。会产生从指定圆心到最远的角的径向渐变--默认值
18             位置：at 关键字(left right top center bottom) | 具体坐标值 50px 50px --默认为center
19                 */
20             /*background-image: radial-gradient(red,blue);*/
21             background-image: radial-gradient(circle farthest-side at 50px 50px,red 50%,blue);
22         }
23     </style>
24 </head>
25 <body>
26 <div></div>
27 </body>
28 </html>

三.重复渐变

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             width: 300px;
 9             height: 300px;
10             /*background: radial-gradient(
11                     #fff 0%,#fff 10%,#000 10%,#000 20%,
12                     #fff 20%,#fff 30%,#000 30%,#000 40%,
13                     #fff 40%,#fff 50%,#000 50%,#000 60%,
14                     #fff 60%,#fff 70%,#000 70%,#000 80%,
15                     #fff 80%,#fff 90%,#000 90%,#000 100%
16             );*/
17             /*重复渐变，会根据已经设置好的渐变进行重复生成*/
18             background: repeating-radial-gradient(
19                     #fff 0%,#fff 10%,#000 10%,#000 20%
20             );
21         }
22     </style>
23 </head>
24 <body>
25 <div></div>
26 </body>
27 </html>