一.线性渐变
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>
