線性漸變,徑向漸變，重複漸變
阿新 • • 發佈：2020-07-15
線性漸變,徑向漸變,重複漸變產生的是影象
線性漸變:有以下2種方式寫法,第二種寫的是每個顏色的起始位置,和結束位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div {width: 300px; height: 300px; background: linear-gradient(to right,red,blue); background: linear-gradient(to right,red 0%,red 50%,blue 50%,blue 100%); } </style> </head> <body> <!-- 線性漸變:不是一個單一的結構,它所產生的是影象,所以使用的是background --><div> </div> </body> </html>
徑向漸變
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 300px; height: 200px; background: radial-gradient(red,blue); /* 語法:radial-gradient(形狀 大小 座標,顏色1,顏色2...); 形狀:shape,circle等等形狀,回去適配當前的如果高度不一樣預設的效果是ellipse 座標:是在正中心可以賦值(參照元素的左上角) 尺寸:size; closeset:最近邊 farthest:最遠邊 closeset-corner;最近角 farthest-corner:最遠角 預設的是最遠角 */ background: radial-gradient(at left top,red,blue); background: radial-gradient(circle farthest-side at 50px 50px, red,blue); background: radial-gradient(red,red 50%,blue 50%,blue); } </style> </head> <body> <div></div> </body> </html>
重複漸變:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { background-color: #ccc; } div:first-of-type { width: 300px; height: 300px; background: repeating-radial-gradient(circle closest-side at center center, #fff 0%, #fff 10%, #000 10%, #000 20%); } div:last-of-type { width: 200px; height: 800px; background: repeating-linear-gradient( 45deg, /*(deg 指的是傾斜多少度)*/ #fff 0%,#fff 10%, #000 10%,#000 20% ); } </style> </head> <body> <div></div> <div></div> </body> </html>