bachground-image背景渐变笔记

background-image的衍生
渐变,用的不是很多(之间PS多好,费这事儿)
1。渐变 (按钮的背景，线性，径向，重复渐变)   
配合background-size:30% 100%;  实现进度条填充,美滋滋




渐变语法
background-image:
取值：
linear-gradient(value)---->线性
radial-gradient(v,v,v,...)--->径向
repeating-linear-gradient(value)---->重复线性
repeating-radial-gradient(v,v,v,...)--->重复径向
重点（线性）
background-image:linear-gradient(angle,color-point,color-point...);
angle:渐变的方向和角度  to top |to left|to bottom |to right|tO bottom right (这种也可以) 
(浏览器不同,角度的开始位置可能不同)
angle:也可取角度  1deg  180deg 
color-point:就是一个颜色和位置的组合而已
color-point:red 10%; blue 50%
径向渐变
radial-gradient([size at position ],color-point,color-point...) []可写可不写
size:半径   position:圆心
background-image:radial-gradient(200px at top left,red 10%,blue 50%,green 100%)
重复渐变
不过是加了一个"repeating-"
color-point(red 10px,blue 20px,yellow 20px); 用像素来表示，而不用百分比。。。
浏览器兼容性可能不行，值得注意。
补充: 
径向渐变: 
默认的渐变中心为center[标签中心],渐变的形状为ellipse[椭圆],渐变大小为 farthest-corner[最远的角落]
渐变形状: ellipse[椭圆],circle[圆]
渐变大小: closest-side[最近的边] farthest-side[最远的边] closest-corner[最近的角落] farthest-corner[最远的角落]
于是就有了这样的写法
circle:圆形渐变
background: repeating-radial-gradient(circle,#FF0B21 15%,#EC09DC 18%,#9A18FD 5%);


2.适应兼容性(不支持才加)
浏览器前缀
Firefox:-moz-
Chrome,Safari:-webkit-
Opera: -o-
background-image:inear-gradient();
background-image:-moz-inear-gradient();
background-image:-o-inear-gradient();