本节学习CSS3中背景渐变功能，主要有线性渐变和径向(放射性)渐变。 [1]线性渐变
background-image: linear-gradient(方位,起始色,末尾色);方位有：to top,to top right,to right,to bottom,to bottom left,to left,to top left等，可以省略。
*测试代码
<!DOCTYPE html> <html lang="zh-cn"> <head> <title>CSS3渐变效果</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="id1">普通的线性渐变</div> <div id="id2">用角度设置方向</div> <div id="id3">多色线性渐变</div> <div id="id4">通过百分比设置多色线性位置</div> <div id="id5">通过长度单位设置多色线性位置</div> <div id="id6">结合背景使用透明渐变实现层次感</div> <div id="id7">前置repeating-实现重复渐变</div> </html> @charset "utf-8"; body{ color: white;/*div标签继承了它*/ } #id1{ width: 500px; height :200px; /*background-color: green;是普通的设置背景颜色的方式*/ background-image: linear-gradient(to top right,orange,green); } #id2{ width: 500px; height :200px; background-image: linear-gradient(80deg,orange,green); } #id3{ width: 500px; height :200px; background-image: linear-gradient(80deg,orange,green,blue,yellow); } #id4{ width: 500px; height :200px; background-image: linear-gradient(80deg,orange 0%,green 20%,blue 70%,yellow 100%); } #id5{ width: 500px; height :200px; background-image: linear-gradient(80deg,orange 2px,green 120px,blue 380px,yellow 480px); } #id6{ width: 500px; height :200px; background: red; background-image: linear-gradient(to top right,rgba(0,0,0,0.6),rgba(0,0,0,0));/*不透明度从0.6到0*/ } #id7{ width: 500px; height :200px; background-image: repeating-linear-gradient(80deg,orange 10%,green 20%); }测试结果：
[2]径向渐变
background-image: radial-gradient(属性,起始色,末尾色);形状属性：circle圆形，ellipse椭圆(默认)。 位置属性(前接连接词at)：top从顶部发散，left从左侧发散，right从右侧发散，bottom从底部发散，且可以作复合。 渐变圆的半径：closest-side到离圆心最近的边，closest-corner到离圆心最近的角(默认)，farthest-side到离圆心最远的边，farthest-corner到离圆心最远的角。还可以用长度单位表示半径，但不接受百分比和负值。
*测试代码
<!DOCTYPE html> <html lang="zh-cn"> <head> <title>CSS3渐变效果</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="id1">普通的线性渐变</div> <div id="id2">添加位置属性</div> <div id="id3">位置属性可以复合</div> <div id="id4">用关键字设置渐变圆的半径</div> <div id="id5">用长度单位设置渐变圆的半径</div> <div id="id6">前置repeating-实现重复渐变</div> </html> @charset "utf-8"; html{ font-size: 62.5%;/*设置1rem=10px*/ } body{ font-size: 1.6em; color: white;/*div标签继承了它*/ } #id1{ width: 500px; height :200px; background-image: radial-gradient(circle,orange,green); } #id2{ width: 500px; height :200px; background-image: radial-gradient(circle at top,orange,green); } #id3{ width: 500px; height :200px; background-image: radial-gradient(circle at top left,orange,green); } #id4{ width: 500px; height :200px; background-image: radial-gradient(circle closest-side,orange,green); } #id5{ width: 500px; height :200px; background-image: radial-gradient(circle 16rem,orange,green); } #id6{ width: 500px; height :200px; background-image: repeating-radial-gradient(circle 6rem,orange,green); }测试结果：
尾注：关于这两种渐变效果的浏览器兼容前缀，因为这里新生的不是background-image属性，而是里面的linear-gradient()或者radial-gradient()，所以像-webkit-这样的浏览器兼容前缀如果要加也是加在它们的前面。对于使用乐repeating-的情况，兼容前缀应加在repeating-前面。
