线性渐变-linear-gradient定义linear-gradient()函数用于创建表示两种或多种颜色线性渐变的图像。结果是梯度数据类型，是一种特殊的图像数据类型。linear-gradient()函数没有固有大小；它没有固有的或首选的大小，也没有首选的比例。函数的具体大小将匹配它所应用的元素的大小。由于渐变数据类型是图像的子数据类型，所以只能在可以使用图像的地方使用渐变。因此，linear-gradient()不适用于background-color和数据类型的类似属性。线性渐变目前无法实现重复渐变。默认情况下，渐变会填充它定义的元素。重复渐变请参考repeating-linear-gradient。如果所有点和长度都使用固定单位（而不是相对于background-size的值指定的百分比或关键字），则渐变背景不受background-size的影响。组成线性渐变由一个轴（渐变线）定义，轴上的每个点都有两种或多种颜色，轴上的每个点都有独立的颜色。为了构造平滑的渐变，linear-gradient()函数构造了一系列垂直于渐变线的彩色线条，每条彩色线的颜色取决于与其垂直的渐变线上的色点。渐变线渐变线由包含渐变形状的容器的中心点和一个角度定义。渐变线上的颜色值由不同的点定义，包括起点、终点，以及两者之间可选的中间点（可以有多个中间点）。起始点起始点是渐变线上代表起始颜色值的点。起点由渐变线和通过容器顶点的垂直线之间的交点定义。（垂直线与渐变线在同一象限内）结束点是渐变线上代表最终颜色值的点。终点也由梯度线和从最近的顶点发出的垂直线之间的交点定义。端点是原点关于容器中心点的反射点。语法背景：linear-gradient(side-or-corner/angle,startcolorposition,position,...,last-colorposition);第一个参数：渐变方向默认不写：相当于tobottom，从上到下nextto+关键字：第一个表示水平位置left或right，第二个表示垂直位置top或bottom。关键字的顺序没有影响，是可选的。角度：渐变线与渐变容器中心点向上垂直线的夹角，角度顺时针增加。background:linear-gradient(40deg,#333,#33350%,#eee75%);//top模式，顺时针旋转40度第二个参数：Gradientcolor英文字母，用于颜色控制16进制#RRGGBB颜色控制16进制加透明度#RRGGBBAA用于颜色控制：不推荐，会造成比较大的兼容性问题。Chrome和Firefox浏览器以#rrggbbaa的形式支持它，但IE不支持这种形式。如果在IE9以下添加透明度，会是#aarrggbb的形式，但是IE10和IE11不管用什么格式都不会显示。所以不推荐使用。AA表示透明度：00表示完全透明，FF表示完全不透明。RR指红色值GG指绿色值BB指蓝色值0~1的透明度转换为00-FF的十六进制透明度方法：Math.round(256*opacity).toString(16)使用rgb/rgbaforcolorControlsusingmultiplecolorcontrols:linear-gradient(#3a1c71,#d76d77,#ffaf7b);在颜色值之后添加一个可选的结束位置（沿渐变轴的百分比值/长度）。颜色中断颜色中断是一种插值提示，它定义从一种颜色的终点到另一种颜色的终点的平滑过渡的中点。如果省略，则放在上一个颜色和下一个颜色的中间，也就是两种颜色转换的中点。如果已定义，则将其放置在前一种颜色和后一种颜色之间定义的位置。linear-gradient(red10%,30%,blue90%);//从起点到10%标记为红色，从90%到结束标记为蓝色//在10%到90%之间，颜色由红色变化过渡到蓝色，但是过渡的中点是30%，如果没有30%，它将默认为50%。如果两种或多种颜色在同一位置终止，则在该位置声明的第一种颜色和最后一种颜色之间的过渡将是一条锐线。颜色结束列表中颜色的结束点应按顺序递增。如果后续颜色的终点小于或等于前一个颜色的终点，则后者将被覆盖，从而创建硬过渡。linear-gradient(red40%,yellow30%,blue65%);//0~40%为红色，无渐变。30%-65%是黄蓝色渐变，6??5%-100%是蓝色径向渐变-radial-gradient定义CSSradial-gradient()函数创建一个图片，一个中心点到外围的颜色渐变。该方法获取一个CSSgradient数据类型的对象，是的一种类型。与其他渐变一样，径向渐变是可变大小的图像。它没有默认的大小和比例，具体大小由它定义的元素的大小决定。径向渐变（Radialgradients）是从中心点呈椭圆形向外扩散的渐变。渐变的实现由两部分组成：椭圆和色标。椭圆部分用于控制径向渐变的位置、大小和形状；色标部分包含一个颜色值和一个位置来控制渐变的颜色变化。从径向渐变的中心点到边缘形状及其延伸部分，由若干个连续缩放的同心圆轮廓组成，这个轮廓是由设定的边缘形状决定的。颜色值的终点用于设置虚拟渐变射线（virtualgradientray）的变化方式，从中心点向右水平变化（如图）。当颜色值的终点按百分比设置时，是渐变射线与边缘形状交点处相对于终点的渐变半径，渐变半径的终点为100%。每个轮廓都是纯色，由渐变射线上相应交点定义的颜色决定。语法背景：radial-gradient(sizeshapeatposition,start-color,...,last-color);第一个参数：确定渐变形状、大小、位置radiussize：确定渐变大小空：不写默认radius从中间开始，图案为圆形。写一个值：默认为圆，圆心为圆心。写两个值：默认是椭圆，一个是水平长度，一个是垂直长度。传递关键字：(closest-side/closest-corner/farthest-side/farthest-corner)，大小由位置决定。closest-side：半径是从圆心到最近的边closest-corner：半径是从圆心到最近的角farthest-side：半径是从圆心到最远的角sidefarthest-corner：半径是从圆心到最远的角，左上是最近的角，右上是最近的边；左下是最远的角，右下是最远的边Shape：确定渐变形状circle/ellipse：如果div是正方形，则圆形和椭圆没有区别；按长度压缩background:radial-gradient(circle,hotpink,darkblue);background:radial-gradient(ellipse,hotpink,darkblue);lengthrangeandshape：半径要写在shape前面，半径的作用大于shapeposition：OK圆心的位置有参数：center/top/bottom/left/right具体值决定圆心的百分比决定圆心重复线性渐变-repeating-linear-gradient定义CSS函数repeating-linear-gradient()创建一个<由重复线性渐变组成的图像>，它是一个类似于linear-gradient的函数并采用相同的参数，但它会在所有方向上重复渐变以覆盖其整个容器。/*0-10%是蓝色，10-20%是蓝红线性渐变，然后这20%的颜色会重复渲染。*/background:repeating-linear-gradient(tolefttop,blue10%,red20%);每次重复，色标位置的偏移量就是参考渐变长度（最后一个色标与第一个色标之间距离的倍数）。因此，最后一个色站的颜色值应与第一个色站的颜色值一致；如果不一致，会造成非常突兀的渐变效果。与其他渐变一样，线性重复渐变没有原始大小，也没有首选比例。它将适应相应元素的大小。如何判断从哪里开始循环？如何判断渐变的长短？关键因素是色标的位置。渐变的长度是最后一个标记的位置。重复径向渐变-repeating-radial-gradient定义CSS函数repeating-radial-gradient()以创建由从原点辐射的重复渐变组成的。它类似于radial-gradient并采用相同的参数，但它在所有方向上重复颜色以覆盖其整个容器。该函数的结果是一个数据类型的对象，它是的一种特殊类型。/*一个从容器中心开始的重复渐变，从红色开始，渐变到蓝色，然后渐变到绿色*/repeating-radial-gradient(circleatcenter,red0,blue,green30px);每次重复时，色标位置的偏移量是基本渐变长度（最后一个色标与第一个色标之间的距离）的倍数。因此，最后一个色站的颜色值应与第一个色站的颜色值一致；如果不一致，会造成非常突兀的渐变效果。与其他渐变一样，线性重复渐变不提供固定大小；也就是说，它没有原始大小或首选大小，也没有首选比例。它将适应相应元素的大小。只有当第一个和最后两个颜色的位置不为0%或100%时，重复渐变才会生效。参考文章你真的了解CSS的linear-gradient吗？深入理解CSS径向渐变radial-gradient深入理解CSS线性渐变linear-gradient
