css渐变

渐变指的是在两个或者多个指定的颜色实现平稳的过渡.渐变效果由浏览器生成.渐变的类型分为linear-gradient(线性渐变)和redial-gradient(径向渐变).

linear-gradient(线性渐变)

一、使用方向(direction)

background: linear-gradient(direction, color1, color2, ...);

1、单方向渐变：

to right 从左到右，进行颜色渐变
to left 从右到左，进行颜色渐变
to bottom 从上到下，进行颜色渐变
to top 从下到上，进颜色从行渐变

例如:

background:linear-gradient(to right,#147b96,#e6d205);

 

2、对角（需要把两个方向相结合）

to right bottom
to right top
to left bottom
to left top

例如:

background:linear-gradient(to bottom right,#147b96,#e6d205);

 

二、使用角度(angle)

background: linear-gradient(angle, color1, color2, ...);

多种颜色

background: linear-gradient(to right, #147b96, #e6d205 25%, #147b96 50%, #e6d205 75%, #147b96);
background: linear-gradient(to right, #147b96, #e6d205 50px, #147b96 50px, #e6d205 50px, #147b96);

 重复渐变

background: repeating-linear-gradient(to right, #147b96, #e6d205 5%, #147b96 10%, #e6d205 20%);

声明多个 - 逗号分隔 - 最先声明优先级最高

background: linear-gradient(green 10px, transparent 10px),
linear-gradient(90deg,green 10px, transparent 10px) repeat left top / 40px,
linear-gradient(transparent 40px, green 4px);

radial-gradient(径向渐变)

基本语法

background: radial-gradient(center, shape size, start-color, ..., last-color);

渐变中心，整个图形的中心点，既可以使用px，也可以使用%。

background-image: radial-gradient(0% 0%, red, green, blue);

渐变形状，主要是有两种：circle（圆形）和ellipse（椭圆形）

background:radial-gradient(circle, red, green, blue);

渐变大小

closest-side- 渐变的半径长度为从圆心到离圆心最近的边

closest-corner- 渐变的半径长度为从圆心到离圆心最近的角

farthest-side- 渐变的半径长度为从圆心到离圆心最远的边

farthest-corner- 渐变的半径长度为从圆心到离圆心最远的角

background:radial-gradient(circle at farthest-corner, red, green, blue);

渐变中心、渐变形状和渐变大小这三个就是径向渐变的主要使用，除此之外，也可以和线性渐变一样使用多种颜色，重复渐变以及声明多个渐变。

浏览器的支持情况

因为它是一个比较新的属性，所以它在浏览器中使用时需要添加它的前缀

不同厂商的浏览器的前缀也是不一样的，比如：

.header {
  /* safari */
  background: -webkit-linear-gradient(red, blue);
  /* opera */
  background: -o-linear-gradient(red, blue);
  /* firefox */
  background: -moz-linear-gradient(red, blue);
  /* 标准的语法, 放在最后 */
  background: linear-gradient(red, blue);
}

不同的浏览器厂商在实现这个标准时也是略有不同的，比如关于方向的定义，角度的定义，是顺时针还是逆时针。