h5-渐变的基本描述 

 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>

 

posted @ 2019-08-20 15:16  FengBrother  阅读(801)  评论(0)    收藏  举报