一.線性漸變
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>
