一.线性渐变
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>小明同学</title> 6 <style type="text/css"> 7 div{ 8 width: 800px; 9 height: 200px; 10 margin: 100px auto; 11 background:-webkit-linear-gradient(-30deg,red 100px,yellow 200px,green 300px,blue 800px); 12 } 13 </style> 14 </head> 15 <body> 16 <!-- 17 线性渐变 ie9以下不支持 18 渐变属于背景下的一个属性 19 20 方法 linear-gradient() 21 写法: 22 比如:background:linear-gradient(90deg,red,yellow,green,blue); 23 括号里的第一个值,是角度 24 第一个值可以是模糊的值,也可以是具体的数值 25 模糊的值: 26 to right 27 to left 28 to top 29 to bottom 30 具体的角度数值 31 32 角度的是指水平线之间的角度,按逆时针方向计算 33 比如: 34 标准 35 0deg 从下到上 36 90deg 从左往右 37 非标准 38 0deg 从左到右 39 90deg 从下到上 40 标准和非标准的换算公式 41 90 - x =y 42 x为标准角度 43 y为非标准角度 44 第二个值开始是颜色值,可以通过具体的数值规定颜色值渐变的区域 45 --> 46 <div></div> 47 </body> 48 </html>
渐变图片:
原理:角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。
二.径向渐变
2.1 渐变
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div{ 8 width: 300px; 9 height: 300px; 10 margin: 30px auto; 11 } 12 .box1{ 13 background:radial-gradient(at center,red 10%,purple 20%,gray 50%); 14 } 15 </style> 16 </head> 17 <body> 18 <!-- 19 径向渐变 ie9以下不支持 20 渐变都是背景下一个属性 21 background:radial-gradient(at center,red,purple,gray); 22 径向渐变是从圆心进行渐变 23 括号里的第一个值,是圆心位置 24 可以是模糊的值 25 at left 26 at center 27 at top 28 at right 29 at bottom 30 也可以是具体的数值 31 at 100px 200px 32 100px为x轴的偏移量 33 200px为y轴的偏移量 34 从第二个值开始,是颜色值,可以通过具体的数值来规定,渐变区域或者范围 35 具体的数值可以是 36 1.100px 37 2.百分比 38 --> 39 <div class="box1"></div> 40 </body> 41 </html>
2.2 渐变补充
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div{ 8 width: 300px; 9 height: 300px; 10 margin: 30px auto; 11 } 12 .box1{ 13 background:radial-gradient(circle at 100px 200px,red 10%,purple 20%,gray 50%); 14 } 15 </style> 16 </head> 17 <body> 18 <!-- 19 括号里的第一个值,是圆心位置或者圆的形状 20 圆的形状:默认为椭圆 21 圆形:circle 22 --> 23 <div class="box1"></div> 24 </body> 25 </html>
2.3 非标准之前
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div{ 8 width: 300px; 9 height: 300px; 10 margin: 30px auto; 11 } 12 .box1{ 13 background:-webkit-radial-gradient(top left,red 10%,purple 20%,gray 50%); 14 } 15 </style> 16 </head> 17 <body> 18 <!-- 19 括号里的第一个值,是圆心位置或者圆的形状 20 标准下: 21 圆的形状:默认为椭圆 22 圆形:circle 23 非标准下: 24 没有设置(circle不好使) 25 圆心位置 26 非标准下不加at 27 --> 28 <div class="box1"></div> 29 </body> 30 </html>
2.4 重复渐变
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div{ 8 width: 300px; 9 height: 300px; 10 margin: 30px auto; 11 } 12 #box1{ 13 background:repeating-radial-gradient(at center,red 10%,purple 20%,gray 50%); 14 } 15 #box2{ 16 background:repeating-linear-gradient(to right,red 10%,purple 20%,gray 50%); 17 } 18 </style> 19 </head> 20 <body> 21 <div id="box1"></div> 22 <div id="box2"></div> 23 </body> 24 </html>
