线性渐变，径向渐变，重复性渐变
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>线性渐变，径向渐变，重复性渐变</title><style type="text/css">.content{clear: both;}.fleft{float:left;}.line{background-image: linear-gradient(0deg,red 50px,yellow 100px,green 200px);width: 200px;height: 200px;border:1px solid black;}.circle1{background-image: -webkit-radial-gradient(circle at top,red，green,yellow);background-image: -ms-radial-gradient(circle at top,red，green,yellow);background-image: -o-radial-gradient(circle at top,red，green,yellow);background-image: radial-gradient(circle at top,red, green,yellow);width: 200px;height: 200px;border-radius: 50%;border:1px solid black;}.circle2{background-image: -webkit-radial-gradient(20px circle at top,red，green,yellow);background-image: -ms-radial-gradient(20px circle at top,red，green,yellow);background-image: -o-radial-gradient(20px circle at top,red，green,yellow);background-image: radial-gradient(20px circle at top,red, green,yellow);width: 200px;height: 200px;border-radius: 50%;border:1px solid black;}.ellipse{background-image: -webkit-radial-gradient(30px 40px ellipse at center,red，green,yellow);background-image: -ms-radial-gradient(30px 40px ellipse at center,red，green,yellow);background-image: -o-radial-gradient(30px 40px ellipse at center,red，green,yellow);background-image: radial-gradient(30px 40px ellipse at center,red, green,yellow);width: 200px;height: 200px;border-radius: 50%;border:1px solid black;}.repeat-liner{background-image: repeating-linear-gradient(to bottom ,red 0px,yellow 40px,green 80px);width: 200px;height: 200px;border:1px solid black;}</style></head><body><div class="content"><div class="line fleft"></div><div class="circle1 fleft"></div><div class="circle2 fleft"></div><div class="ellipse fleft"></div><div class="repeat-liner fleft"></div></div></body></html><!-- 径向渐变分两种类型，圆形和椭圆形-->
