1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 /*线性渐变*/
8 .linear-gradient{
9 width: 300px;
10 height: 300px;
11 /*添加渐变：渐变不是一个单一色，他产生的是图像，所以用background*/
12 /*linnar-gradient(方向，开始颜色 位置，颜色二 位置，颜色三 位置)
13 方向
14 to top：0deg
15 to right：90deg
16 to bottom：180deg 默认值
17 to left：270deg
18 */
19 /*background: linear-gradient(to right,red,blue);*/
20 background: linear-gradient(to right,red 0%,red 50%,blue 50%,blue 100%);
21 }
22
23 /*径向渐变*/
24 .radial-gradient{
25 width: 300px;
26 height: 300px;
27 /*background: radial-gradient(red,blue);
28 语法：radial-gradient(形状，大小，坐标)
29 形状shape：circle:产生正方形的渐变 ellipse:适配当前形状，如果是正方形两者一样.如果宽高不一样，默认效果切换带ellipse
30 at position:坐标，默认在正中心。可以赋值坐标，也可以赋值关键字(legt center right top bottom)
31 大小size：closest-side：最近边；farthest-side：最远变；closest-corner：最近角；farthest-corner：最远角。默认是最远角
32 */
33 /*background: radial-gradient(at left top,red,blue);*/
34 /* background: radial-gradient(circle closest-corner at 50px 50px,red,blue);*/
35 background: radial-gradient(red,red 50%,blue 50%,blue);
36 }
37
38
39 /*重复渐变*/
40 .reparing-radial-gradient{
41 width: 300px;
42 height: 300px;
43 background: repeating-radial-gradient(circle farthest-side at center center,
44 #fff 0%,#fff 10%,
45 #000 10%,#000 20%);
46 }
47 .repeating-linear-gradient{
48 width: 300px;
49 height: 800px;
50 background: repeating-linear-gradient(30deg,
51 #fff 0%,#fff 10%,
52 #000 10%,#000 20%);
53 }
54 .repeating-conic-gradient{
55 width: 400px;
56 height: 400px;
57 background: repeating-conic-gradient(
58 #fff 0%,#ccc 10%,
59 #000 10%,#0000 20%
60 );
61 }
62 </style>
63 </head>
64 <body>
65 <div class="linear-gradient"></div>
66 <div class="radial-gradient"></div>
67 <div class="reparing-radial-gradient"></div>
68 <div class="repeating-linear-gradient"></div>
69 <div class="repeating-conic-gradient"></div>
70 </body>
71 </html>
