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>