一、渐变1.1关于渐变渐变是指从一种颜色到另一种颜色的平滑过渡。是一种图片类型，但是渐变类型的图片没有大小，也没有纵横比。它的大小取决于应用场景。比如当作为元素的背景图片时，它的大小取决于元素的background-size，当作为list-style-image属性的值时，它的大小取决于TODO？？？的元素。1.2渐变框（gradientbox）渐变的大小也叫渐变框，表示渐变绘制的区域和位置。渐变框的大小和位置根据应用渐变的场景而不同地确定。例如，背景图像受background-size、background-position的影响。1.3参见参考文献3的兼容性。2.linear-gradient2.1渐变线（gradientline）通过linear-gradient函数可以创建线性渐变图像。线性渐变由称为渐变线的轴定义。以渐变框的中心为原点绘制坐标系（上为Y轴正向，右为X轴正向），使渐变框的四个角分别在坐标系的四个象限。渐变线的起点和终点由通过坐标系原点的任意角度（顺时针方向为正方向）的直线与该线所在象限的两个渐变框角点垂直相交而成穿过，正方向为终点。如：默认0deg：顺时针45deg：注意：渐变线的起点和终点不一定在渐变框区域内。2.2渐变区域的颜色渐变线起点和终点之间任意一点的垂线颜色相同，垂线和渐变框重叠区域的颜色为梯度区域。综上所述，确定一个线性渐变的实际结果会经过这些步骤：确定渐变框的大小和位置；确定渐变线的起点和终点；确定渐变线起点和终点内所有点的垂直线的颜色；以及垂直线和渐变框的重叠区域。2.3语法linear-gradient()=linear-gradient([|to]?,,[,...])<边或角>=[左|对]||[顶|bottom]=?参数1用于确定渐变线的起点，可以选择，默认为180deg（到底部）；除了使用类型的数据，还可以使用关键字（记得带上to关键字）：四个边：top,right,bottom,left。对应的角度值依次为：0deg、90deg、180deg、270deg。四个角：右上角、左上角、右下角、左下角。注意四个角代表渐变框矩形的四个角，右上角不一定是45deg。参数2...N是定义渐变线的颜色点，用于确定渐变线起点和终点内所有点垂直线的颜色。色点列表具有至少两个色点参数。linear-gradient(yellow,blue);linear-gradient(180deg,yellow,blue);linear-gradient(tobottom,yellow,blue);2.4色标(color-stops)色标包含两条信息：点的颜色和点的位置（渐变线上的位置，1D）。渐变过渡效果直接发生在两个相邻色点之间。颜色点的位置参数可以省略：如果省略第一个颜色点的位置，则值为0%；如果省略最后一个位置，则值为100%；否则，该值为相邻两个位置的中间点位置。如果色点的位置小于其左侧色点的位置，则该值为其左侧色点的位置。即右侧颜色的位置大于或等于左侧色点的位置。除了%之外，您还可以使用px单位，它是根据渐变线的长度计算的。尝试在相同的梯度中使用相同的单位。position参数可以超出渐变线的长度范围，比如负值或者大于100%的值。渐变效果只有在两个相邻位置之间有直接距离时才会参数化，距离为0时颜色会突然变化。linear-gradient(red,white20%,blue)//equivalentlinear-gradient(red0%,white20%,blue100%)linear-gradient(red40%,white,black,blue)//等效线性-gradient(red40%,white60%,black80%,blue100%)linear-gradient(red-50%,white,blue)//等价的linear-gradient(red-50%,white25%,blue100%))linear-gradient(red-50px,white,blue)//等效linear-gradient(red-50px,whitecalc(-25px+50%),blue100%)linear-gradient(red20px,white0px,blue40px))//等效线性渐变(red20px,white20px,blue40px)linear-gradient(red,white-50%,black150%,blue)//等效线性渐变(red0%,white0%,black)150%,blue150%)linear-gradient(red80px,white0px,black,blue100px)//等效linear-gradient(red80px,white80px,black90px,blue100px)linear-gradient(0deg,red60%),黄色50%,#000100%);//相当于线性渐变（0deg,red0%,red60%,yellow60%,#000100%）;而红黄直接距离为0，无渐变，如下图：W3CDraftcss-tricksCSS3线性渐变（linear-gradient）
