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>