CSS3渐变

CSS 渐变

线性渐变

linear-gradient(direction,color1 position1,color2 position2,....)

direction:渐变方向。两种表示方式

1.关键字描述

1. linear-gradient(to bottom,red,blue); 这是默认方向，从上到下
2. linear-gradient(to bottom right,red,blue); 右下角方向
3. 关键字包含
   1. top
   2. bottom
   3. left
   4. right

2.角度表示 : 90deg,180deg.....

1. linear-gradient（80deg，yellow 50%，black 50%，blue）：中间有明显过渡线的效果
2. deg:角度
3. red：弧度
4. trun:圈数
5. grad:百分度，400grad表示360deg

color:渐变颜色

1.颜色可以用任何模式表示，位置可以用百分比或者数数值表示
2.如果渐变只有两种颜色，且第一个颜色的位置为n%，第二个颜色的位置为m%，则浏览器会0%~n%的范围设置为第一个颜色，m%~100%设置为后一个颜色，中间才是两个颜色的过渡，如果没有指定位置，会均匀过渡。

position:渐变位置 ,可以省略，浏览器默认把第一个颜色的位置设为0%，最后一个位置设为100%

重复线性渐变

repeating-linear-gradient(blue 20%， green 50%);
repeating-linear-gradient(transparent, #4d9f0c 40px); 

repeating-linear-gradient(0.25turn, transparent, #3f87a6 20px);
/* 从左到右重复五次的渐变，从红色开始，然后变绿，再变回红色 */
repeating-linear-gradient(to right, red 0%, green 10%, red 20%);

1. 只有首尾两颜色位置不在0%和100%时，才会有重复渐变效果
2. CSS样式中，渐变相当于背景图片，可以使用url()的地方，都可以用渐变

径向渐变

radial-gradient（shape,size,blue 20%，green 50%）；
radial-gradient(farthest-corner at 40px 40px,#f35 0%,#43e 100%);
/* 在容器中心的渐变，从红色开始，变成蓝色，最后变成绿色 */
radial-gradient(circle at center, red 0, blue, green 100%)

radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);

radial-gradient(ellipse at top, #e66465, transparent),
radial-gradient(ellipse at bottom, #4d9f0c, transparent);

1.position: 控制椭圆的圆心,可以用关键字和数值，百分比以及单个关键字，表示圆心

1. top
2. botton
3. left
4. right
5. center
6. 20px 30px

2.shape:控制形状。

1. circle：圆形
2. ellipse：椭圆形

3.size：定义渐变半径的大小

1. farthest-side:半径从圆心到最远边，默认值
2. farthest-corner半径从圆心到最远角
3. closest-side:半径从圆心到最近边
4. closest-corner:半径从圆心到最近角
5. 也可以用两个值分别表示水平直径和垂直直径

当位置处于100%的色标没有占满渐变区域时，浏览器默认会使用最后一个颜色铺满渐变区域。

重复径向渐变

repeating-radial-gradient(circle at center, red, yellow 10%, green 15%); 

/* 接近容器左上角的椭圆形渐变，
   由红色开始，改变为绿色，然后再变回红色，
   在中心和右下角之之间重复五次，
   在中心和左上角之间只重复一次 */
repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);