渐变 Windows.docx
《渐变 Windows.docx》由会员分享，可在线阅读，更多相关《渐变 Windows.docx（16页珍藏版）》请在冰豆网上搜索。
渐变Windows
InternetExplorer10和使用JavaScript的Windows应用商店应用支持在任何接受图像的属性（如background-image属性（以及background快捷属性的image值）、list-style-image属性和生成的内容）中使用级联样式表级别3（CSS3）渐变。
渐变的工作方式正如CSS3图像值和替换内容模块的渐变部分（截止到编写本文档时尚处于候选推荐阶段）中所指定的那样。
渐变是指图像从一种颜色逐渐过渡到另一种颜色。
InternetExplorer10支持线性、圆形和椭圆形CSS3渐变，每种渐变都由一条渐变线和两个或更多停止点来指定。
每个停止点都有自己的颜色，WindowsInternetExplorer用从一种颜色到另一种颜色的连续颜色过渡来填充每组点之间的区域。
有关CSS3渐变的实例演示，请参阅IETestDrive上的CSS渐变生成器。
本主题包含下列部分：
∙线性渐变
∙径向渐变
∙重复渐变
∙相关主题
线性渐变
在线性渐变中，颜色平滑地沿一条线过渡。
创建线性渐变的方法是：
先为渐变指定要遵循的渐变线，然后指定两个或更多颜色停止点，用逗号分隔。
线性渐变的基本语法如下所示：
linear-gradient（[[|to],]?
[,]+）
函数
描述
linear-gradient（）
通过指定渐变线和两种或多种停止颜色和偏移来指定线性渐变。
该属性的可能值如下所示：
可选。
渐变线应假定的角度，表现为后跟角度单位指示符的数字（例如，"deg"）。
"0deg"指示以顺时针方向向上角度增加或相反角度增加。
因此，"90deg"指示向右，"180deg"指示向下，以此类推。
如果没有提供角度，则渐变线从角或角对面的边或者指定的边开始。
可选值，指定渐变的结束角或边。
此值以"to"开始，后跟一个或两个以下关键字。
其中包括指定结束边的一个关键字，和指定结束角的两个关键字。
o以下值仅可用作第一个值：
▪left指示渐变在左边结束。
▪right指示渐变在右边结束。
o以下值仅可用作第二个值：
▪top指示渐变在上面结束。
▪bottom指示渐变在下面结束。
o不包含任何关键字或角度等价于"tobottom"。
至少需要两个颜色停止点。
每个颜色停止点具有一个或两个组件—一个颜色组件和一个可选位置组件。
第一个组件定义渐变停止点的颜色组件。
每个停止点具有其自己指定的颜色，并且每个点之间的区域使用从一种颜色到另一种颜色的连续的颜色过渡填充。
此值可以是任意支持的颜色值。
每个停止点可以具有一个可选百分比或支持的长度值，用于指示在沿渐变线的何处放置颜色停止点。
"0%"（或"0px"、"0em"等等）指示开始点（或边）；"100%"指示停止点（或边）。
下面的线性渐变（用作background-image属性的参数）具有三个颜色停止点：
∙第一个颜色停止点位于右上角，定义了一条延伸到左下角的渐变线。
第一个停止点是一片黄色。
∙第二个颜色停止点位于渐变线的中点，是一片绿色。
∙最后一个颜色停止点位于渐变线的80%处，是一片蓝色。
从此停止点到渐变线的末尾（80%到100%之间），颜色依然是这片蓝色。
渐变线从矩形的右上角开始并在左下角结束。
实际角度取决于渐变填充的元素的尺寸。
CSS
background-image:
linear-gradient（tobottomleft,#FFF1330%,#16D61150%,#00A3EF80%）;
若要使用具有相同尺寸框（250px×150px）的角度复制此渐变，则应指定以下值：
CSS
background-image:
linear-gradient（210deg,#FFF1330%,#16D61150%,#00A3EF80%）;
当然，如果填充区域的尺寸更改，则这两个渐变外观也会不同。
在决定如何指定渐变时请记住这点。
第一个定义的渐变（指定了"tobottomleft"）的图片如下，其框为450pxx150px。
第二个定义的渐变（指定了"210deg"）的图片如下，具有相同尺寸的框。
径向渐变
线性渐变是从线的一端过渡到另一端，与之相比，径向渐变则先开始于一点，然后呈圆形或椭圆形由内向外均匀地扩散开。
指定径向渐变的方法是：
先指定一个中心点，然后是最终的圆形或椭圆形的大小和形状—如果是椭圆形—或100%，最后是中间的颜色停止点，都由逗号分隔。
径向渐变的基本语法如下所示：
radial-gradient（[[||][at]?
|at,]?
[,]+）
函数
描述
radial-gradient（）
通过首先定义一个中心点，然后定义最终圆形或椭圆形的大小和形状—如果是椭圆形—或100%，然后定义二者之间的颜色停止点，之间以逗号分隔，来指定径向渐变。
属性的可能值以下所示：
可选值，用于指定渐变的结束形状。
如果省略此值，则结束形状为圆形（如果size参数为单个长度值），否则为椭圆形。
oellipse指示渐变采用椭圆形状。
ocircle指示渐变采用圆形形状。
可选值，用于指定渐变的结束形状的尺寸。
如果省略此值，则值默认为farthest-corner。
o
一个或两个空格分隔的长度值或两个百分比值。
如果指定了一个长度值，则该值指示圆形的半径。
如果指定了两个值（长度或百分比），则第一个值表示水平半径，而第二个值表示垂直半径。
百分比值是相对于对应的渐变框的尺寸。
百分比仅可用于指定椭圆渐变的尺寸，不能用于指定圆形渐变。
负值无效。
oclosest-side对于圆形渐变，此值指示结束形状为定义了尺寸的圆形，以便可精确地符合最接近其中心的框的边。
对于椭圆形渐变，渐变形状为椭圆形尺寸，以便可以精确地符合最接近其中心的框的垂直边和水平边。
oclosest-corner确定渐变形状的尺寸，以便精确符合距其中心的框的最接近的角。
对于椭圆形渐变，渐变形状具有类似closest-side指定的宽度与高度的比率。
ofarthest-side类似于closest-side，除了确定渐变形状的尺寸以符合距其中心最远的框的边（对于圆形渐变）或最远的垂直或水平边（对于椭圆形渐变）。
ofarthest-corner确定渐变的尺寸，以便可以精确符合距其中心最远的框的角。
对于椭圆形渐变，渐变形状具有与类似farthest-side指定的宽度与高度的比率。
可选值，用于指定渐变的中心。
此值可以选取与background-position属性相同的值。
如果省略此值，则默认为center。
至少需要两个颜色停止点。
每个颜色停止点具有一个或两个组件—一个颜色组件和一个可选位置组件。
第一个组件定义渐变的停止点的颜色组件。
每个停止点具有其自己的指定的颜色，并且每个停止点之间的区域使用从一个颜色到另一个颜色的连续颜色过渡进行填充。
此值可以是任意支持的颜色值。
第二个组件是可选百分比值或十进制值，用于指示沿渐变射线的何处（类似指向linear-gradient中的渐变线，但不是从中心向外发射）定位颜色停止点。
"0%"指示渐变射线的开始，而"100%"指示渐变射线与结束形状相交的点。
例如，值"20%"指示颜色停止点应位于渐变射线长度的20%处的点，从线的开始处算起。
该值可以为负值，指示该值指定的颜色位于到渐变中心处下一颜色的中间过渡位置，以便中心处的可见颜色将是指定颜色和下一颜色之间的某个颜色。
该值可以大于100%，用于指定具渐变中心相对最大距离的位置。
通常不同的径向渐变语法可用于产生相同结果。
例如，所有以下三个示例，当应用于250×150-pixeldiv元素时，会产生如下图像。
CSS
background-image:
radial-gradient（yellow,blue）;
background-image:
radial-gradient（ellipseatcenter,yellow0%,blue100%）;
background-image:
radial-gradient（farthest-cornerat50%50%,yellow,blue）;
以下示例类似于上述示例，不同的是指定了圆形渐变。
CSS
background-image:
radial-gradient（circle,yellow,blue）;
以下示例指定了三种颜色。
任一声明产生如下图像。
CSS
background-image:
radial-gradient（#FFF133,#16D611,#00A3EF）;
background-image:
radial-gradient（ellipseatcenter,#FFF1330%,#16D61150%,#00A3EF100%）;
当然，你也可以从非渐变框中心位置发出径向渐变。
使用closest-side或farthest-side关键字确定渐变的尺寸，以便结束形状分别符合渐变框的最近或最远边。
CSS
background-image:
radial-gradient（farthest-sideatleftbottom,#FFF133,#16D611100px,#00A3EF）;
以下示例设置距渐变框左边40px和距渐变框顶边50px的位置为渐变中心。
第一个示例使用closest-side，以便渐变的结束形状由渐变框的最接近边定义—即，顶边和左边。
CSS
background-image:
radial-gradient（closest-sideat40px50px,#FFF133,#16D611,#00A3EF）;
第二个示例使用farthest-side，以便渐变的结束形状由渐变框的最远边定义—即，右边和底边。
CSS
background-image:
radial-gradient（farthest-sideat40px50px,#FFF133,#16D611,#00A3EF）;
如果将closest-side或farthest-side用于圆形渐变，则渐变框的最接近边确定尺寸。
对于以下closest-side示例，该边为左边。
CSS
background-image:
radial-gradient（closest-sidecircleat40px50px,#FFF133,#16D611,#00A3EF）;
对于以下farthest-side示例，圆形渐变的尺寸由渐变框的右边确定。
CSS
background-image:
radial-gradient（farthest-sidecircleat40px50px,#FFF133,#16D611,#00A3EF）;
重复渐变
InternetExplorer10和使用JavaScript的Windows应用商店应用也支持重复的线性和径向渐变。
每个重复渐变属性与其非重复的同类具有相同的语法。
重复线性渐变的基本语法如下所示：
repeating-linear-gradient（[[|to],]?
[,]+）
函数
描述
repeating-linear-gradient（）
通过指定渐变线和两种或多种停止颜色和偏移来指定重复线性渐变。
该属性的可能值如下所示：
可选。
渐变线应假定的角度，表现为后跟角度单位指示符的数字（例如，"deg"）。
"0deg"指示以顺时针方向向上角度增加或相反角度增加。
因此，"90deg"指示向右，"180deg"指示向下，以此类推。
如果没有提供角度，则渐变线从角或角对面的边或者指定的边开始。
可选值，指定渐变的结束角或边。
此值以"to"开始，后跟一个或两个以下关键字。
其中包括指定结束边的一个关键字，和指定结束角的两个关键字。
o以下值仅可用作第一个值：
▪left指示渐变在左边结束。
▪right指示渐变在右边结束。
o以下值仅可用作第二个值：
▪top指示渐变在上面结束。
▪bottom指示渐变在下面结束。
o不包含任何关键字或角度等价于"tobottom"。
至少需要两个颜色停止点。
每个颜色停止点具有一个或两个组件—一个颜色组件和一个可选位置组件。
第一个组件定义渐变停止点的颜色组件。
每个停止点具有其自己指定的颜色，并且每个点之间的区域使用从一种颜色到另一种颜色的连续的颜色过渡填充。
此值可以是任意支持的颜色值。
每个停止点可以具有一个可选百分比或支持的长度值，用于指示在沿渐变线的何处放置颜色停止点。
"0%"（或"0px"、"0em"等等）指示开始点（或边）；"100%"指示停止点（或边）。
repeating-linear-gradient函数的语法等同于linear-gradient函数的语法。
在到达上个颜色停止点后，渐变从第一个颜色停止点处重新开始并重复。
最好的方法是指定第一次和最后一次颜色停止点具有相同颜色，以防止每次重复组之间的突兀的颜色更改。
以下示例介绍重复的线性渐变。
它在两种颜色—蓝色和黄色-间过渡。
CSS
background-image:
repeating-linear-gradient（#00A3EF,#FFF13330px,#00A3EF50px）;
重复径向渐变的基本语法如下所示：
repeating-radial-gradient（[[||][at]?
|at,]?
[,]+）
函数
描述
repeating-radial-gradient（）
通过首先定义一个中心点，然后定义最终圆形或椭圆形的大小和形状—如果是椭圆形—或100%，然后定义二者之间的颜色停止点，之间以逗号分隔，来指定重复径向渐变。
属性的可能值以下所示：
可选值，用于指定渐变的结束形状。
如果省略此值，则结束形状为圆形（如果size参数为单个长度值），否则为椭圆形。
oellipse指示渐变采用椭圆形状。
ocircle指示渐变采用圆形形状。
可选值，用于指定渐变的结束形状的尺寸。
其可能值为两个空格分隔的长度值（或百分比）或者一个以下关键字。
如果省略此值，则值默认为farthest-corner。
o
一个或两个空格分隔的长度值或两个百分比值。
如果指定了一个长度值，则该值指示圆形的半径。
如果指定了两个值（长度或百分比），则第一个值表示水平半径，而第二个值表示垂直半径。
百分比值是相对于对应的渐变框的尺寸。
百分比仅可用于指定椭圆渐变的尺寸，不能用于指定圆形渐变。
负值无效。
oclosest-side对于圆形渐变，此值指示结束形状为定义了尺寸的圆形，以便可精确地符合最接近其中心的框的边。
对于椭圆形渐变，渐变形状为椭圆形尺寸，以便可以精确地符合最接近其中心的框的垂直边和水平边。
oclosest-corner确定渐变形状的尺寸，以便精确符合距其中心的框的最接近的角。
对于椭圆形渐变，渐变形状具有类似closest-side指定的宽度与高度的比率。
ofarthest-side类似于closest-side，除了确定渐变形状的尺寸以符合距其中心最远的框的边（对于圆形渐变）或最远的垂直或水平边（对于椭圆形渐变）。
ofarthest-corner确定渐变的尺寸，以便可以精确符合距其中心最远的框的角。
对于椭圆形渐变，渐变形状具有与类似farthest-side指定的宽度与高度的比率。
可选值，用于指定渐变的中心。
此值可以选取与background-position属性相同的值。
如果省略此值，则默认为center。
至少需要两个颜色停止点。
每个颜色停止点具有一个或两个组件—一个颜色组件和一个可选位置组件。
第一个组件定义渐变的停止点的颜色组件。
每个停止点具有其自己的指定的颜色，并且每个停止点之间的区域使用从一个颜色到另一个颜色的连续颜色过渡进行填充。
此值可以是任意支持的颜色值。
第二个组件是可选百分比值或十进制值，用于指示沿渐变射线的何处（类似指向linear-gradient中的渐变线，但不是从中心向外发射）定位颜色停止点。
"0%"指示渐变射线的开始，而"100%"指示渐变射线与结束形状相交的点。
例如，值"20%"指示颜色停止点应位于渐变射线长度的20%处的点，从线的开始处算起。
该值可以为负值，指示该值指定的颜色位于到渐变中心处下一颜色的中间过渡位置，以便中心处的可见颜色将是指定颜色和下一颜色之间的某个颜色。
该值可以大于100%，用于指定具渐变中心相对最大距离的位置。
repeating-radial-gradient函数的语法等同于radial-gradient函数的语法。
在到达上个颜色停止点后，渐变从第一个颜色停止点处重新开始并重复。
最好的方法是指定第一次和最后一次颜色停止点具有相同颜色，以防止每次重复组之间的突兀的颜色更改。
以下声明创建重复圆形渐变。
CSS
background-image:
repeating-radial-gradient（closest-sidecircleat40px50px,#FFF133,#16D611,#00A3EF）;
以下声明创建重复椭圆形渐变。
CSS
background-image:
repeating-radial-gradient（closest-sideat40px50px,#FFF133,#16D611,#00A3EF,#FFF133）;
相关主题
CSS渐变生成器
CSS
InternetExplorer10开发者指南
升级会员 