渐变 Windows.docx

1、渐变 WindowsInternet Explorer 10 和使用 JavaScript 的 Windows 应用商店应用支持在任何接受图像的属性（如 background-image属性（以及 background 快捷属性的 image 值）、list-style-image 属性和生成的内容）中使用级联样式表级别 3 (CSS3) 渐变。渐变的工作方式正如 CSS3 图像值和替换内容模块的渐变部分（截止到编写本文档时尚处于候选推荐阶段）中所指定的那样。渐变是指图像从一种颜色逐渐过渡到另一种颜色。Internet Explorer 10 支持线性、圆形和椭圆形 CSS3 渐变，每种渐变都

2、由一条渐变线和两个或更多停止点来指定。每个停止点都有自己的颜色，Windows Internet Explorer 用从一种颜色到另一种颜色的连续颜色过渡来填充每组点之间的区域。有关 CSS3 渐变的实例演示，请参阅 IE Test Drive 上的 CSS 渐变生成器。本主题包含下列部分： 线性渐变 径向渐变 重复渐变 相关主题线性渐变在线性渐变中，颜色平滑地沿一条线过渡。创建线性渐变的方法是：先为渐变指定要遵循的渐变线，然后指定两个或更多颜色停止点，用逗号分隔。线性渐变的基本语法如下所示：linear-gradient( | to , ? , +)函数描述linear-gradient()

3、通过指定渐变线和两种或多种停止颜色和偏移来指定线性渐变。该属性的可能值如下所示：可选。渐变线应假定的角度，表现为后跟角度单位指示符的数字 （例如，deg）。0deg 指示以顺时针方向向上角度增加或相反角度增加。因此，90deg 指示向右，180deg 指示向下，以此类推。如果没有提供角度，则渐变线从角或角对面的边或者 指定的边开始。可选值，指定渐变的结束角或边。此值以 to 开始，后跟一个或两个以下关键字。其中包括指定结束边的一个关键字，和指定结束角的两个关键字。o 以下值仅可用作第一个值： left 指示渐变在左边结束。 right 指示渐变在右边结束。o 以下值仅可用作第二个值： top

4、指示渐变在上面结束。 bottom 指示渐变在下面结束。o 不包含任何关键字或角度等价于 to bottom。至少需要两个颜色停止点。每个颜色停止点具有一个或两个组件一个颜色组件和一个可选位置组件。第一个组件定义渐变停止点的颜色组件。每个停止点具有其自己指定的颜色，并且每个点之间的区域使用从一种颜色到另一种颜色的连续的颜色过渡填充。此值可以是任意支持的颜色值。每个停止点可以具有一个可选百分比或支持的长度值，用于指示在沿渐变线的何处放置颜色停止点。0%（或 0px、0em 等等）指示开始点（或边）；100% 指示停止点（或边）。 下面的线性渐变（用作 background-image 属性的参数

5、）具有三个颜色停止点： 第一个颜色停止点位于右上角，定义了一条延伸到左下角的渐变线。第一个停止点是一片黄色。 第二个颜色停止点位于渐变线的中点，是一片绿色。 最后一个颜色停止点位于渐变线的 80% 处，是一片蓝色。从此停止点到渐变线的末尾（80% 到 100% 之间），颜色依然是这片蓝色。渐变线从矩形的右上角开始并在左下角结束。实际角度取决于渐变填充的元素的尺寸。CSSbackground-image: linear-gradient(to bottom left, #FFF133 0%, #16D611 50%, #00A3EF 80%);若要使用具有相同尺寸框 (250px150px) 的

6、角度复制此渐变，则应指定以下值：CSSbackground-image: linear-gradient(210deg, #FFF133 0%, #16D611 50%, #00A3EF 80%);当然，如果填充区域的尺寸更改，则这两个渐变外观也会不同。在决定如何指定渐变时请记住这点。第一个定义的渐变（指定了 to bottom left）的图片如下，其框为 450px x 150px。第二个定义的渐变（指定了 210deg）的图片如下，具有相同尺寸的框。径向渐变线性渐变是从线的一端过渡到另一端，与之相比，径向渐变则先开始于一点，然后呈圆形或椭圆形由内向外均匀地扩散开。指定径向渐变的方法是：先

7、指定一个中心点，然后是最终的圆形或椭圆形的大小和形状如果是椭圆形或 100%，最后是中间的颜色停止点，都由逗号分隔。径向渐变的基本语法如下所示：radial-gradient( | at ? , | at , ? , +)函数描述radial-gradient()通过首先定义一个中心点，然后定义最终圆形或椭圆形的大小和形状如果是椭圆形或 100%，然后定义二者之间的颜色停止点，之间以逗号分隔，来指定径向渐变。属性的可能值以下所示：可选值，用于指定渐变的结束形状。如果省略此值，则结束形状为圆形（如果 size 参数为单个长度值），否则为椭圆形。o ellipse 指示渐变采用椭圆形状。o cir

8、cle 指示渐变采用圆形形状。可选值，用于指定渐变的结束形状的尺寸。如果省略此值，则值默认为 farthest-corner。o 一个或两个空格分隔的长度值或两个百分比值。如果指定了一个长度值，则该值指示圆形的半径。如果指定了两个值（长度或百分比），则第一个值表示水平半径，而第二个值表示垂直半径。百分比值是相对于对应的渐变框的尺寸。百分比仅可用于指定椭圆渐变的尺寸，不能用于指定圆形渐变。负值无效。o closest-side 对于圆形渐变，此值指示结束形状为定义了尺寸的圆形，以便可精确地符合最接近其中心的框的边。对于椭圆形渐变，渐变形状为椭圆形尺寸，以便可以精确地符合最接近其中心的框的垂直边和

9、水平边。o closest-corner 确定渐变形状的尺寸，以便精确符合距其中心的框的最接近的角。对于椭圆形渐变，渐变形状具有类似 closest-side 指定的宽度与高度的比率。o farthest-side 类似于 closest-side，除了确定渐变形状的尺寸以符合距其中心最远的框的边（对于圆形渐变）或最远的垂直或水平边（对于椭圆形渐变）。o farthest-corner 确定渐变的尺寸，以便可以精确符合距其中心最远的框的角。对于椭圆形渐变，渐变形状具有与类似 farthest-side 指定的宽度与高度的比率。可选值，用于指定渐变的中心。此值可以选取与 background-p

10、osition 属性相同的值。如果省略此值，则默认为 center。至少需要两个颜色停止点。每个颜色停止点具有一个或两个组件一个颜色组件和一个可选位置组件。第一个组件定义渐变的停止点的颜色组件。每个停止点具有其自己的指定的颜色，并且每个停止点之间的区域使用从一个颜色到另一个颜色的连续颜色过渡进行填充。此值可以是任意支持的颜色值。第二个组件是可选百分比值或十进制值，用于指示沿渐变射线的何处（类似指向 linear-gradient中的渐变线，但不是从中心向外发射）定位颜色停止点。0% 指示渐变射线的开始，而 100% 指示渐变射线与结束形状相交的点。例如，值 20% 指示颜色停止点应位于渐变射线

11、长度的 20% 处的点，从线的开始处算起。该值可以为负值，指示该值指定的颜色位于到渐变中心处下一颜色的中间过渡位置，以便中心处的可见颜色将是指定颜色和下一颜色之间的某个颜色。该值可以大于 100%，用于指定具渐变中心相对最大距离的位置。 通常不同的径向渐变语法可用于产生相同结果。例如，所有以下三个示例，当应用于 250150-pixel div 元素时，会产生如下图像。CSSbackground-image: radial-gradient(yellow, blue);background-image: radial-gradient(ellipse at center, yellow 0%,

12、 blue 100%);background-image: radial-gradient(farthest-corner at 50% 50%, yellow, blue);以下示例类似于上述示例，不同的是指定了圆形渐变。CSSbackground-image: radial-gradient(circle, yellow, blue);以下示例指定了三种颜色。任一声明产生如下图像。CSSbackground-image: radial-gradient(#FFF133, #16D611, #00A3EF);background-image: radial-gradient(ellipse

13、at center, #FFF133 0%, #16D611 50%, #00A3EF 100%);当然，你也可以从非渐变框中心位置发出径向渐变。使用 closest-side 或 farthest-side 关键字确定渐变的尺寸，以便结束形状分别符合渐变框的最近或最远边。CSSbackground-image: radial-gradient(farthest-side at left bottom, #FFF133, #16D611 100px, #00A3EF);以下示例设置距渐变框左边 40px 和距渐变框顶边 50px 的位置为渐变中心。第一个示例使用 closest-side，以便

14、渐变的结束形状由渐变框的最接近边定义 即，顶边和左边。CSSbackground-image: radial-gradient(closest-side at 40px 50px, #FFF133, #16D611, #00A3EF);第二个示例使用 farthest-side，以便渐变的结束形状由渐变框的最远边定义 即，右边和底边。CSSbackground-image: radial-gradient(farthest-side at 40px 50px, #FFF133, #16D611, #00A3EF);如果将 closest-side 或 farthest-side 用于圆形渐变，

15、则渐变框的最接近边确定尺寸。对于以下 closest-side 示例，该边为左边。CSSbackground-image: radial-gradient(closest-side circle at 40px 50px, #FFF133, #16D611, #00A3EF);对于以下 farthest-side 示例，圆形渐变的尺寸由渐变框的右边确定。CSSbackground-image: radial-gradient(farthest-side circle at 40px 50px, #FFF133, #16D611, #00A3EF);重复渐变Internet Explorer 1

16、0 和使用 JavaScript 的 Windows 应用商店应用也支持重复的线性和径向渐变。每个重复渐变属性与其非重复的同类具有相同的语法。重复线性渐变的基本语法如下所示：repeating-linear-gradient( | to , ? , +)函数描述repeating-linear-gradient()通过指定渐变线和两种或多种停止颜色和偏移来指定重复线性渐变。该属性的可能值如下所示：可选。渐变线应假定的角度，表现为后跟角度单位指示符的数字 （例如，deg）。0deg 指示以顺时针方向向上角度增加或相反角度增加。因此，90deg 指示向右，180deg 指示向下，以此类推。如果没有

17、提供角度，则渐变线从角或角对面的边或者 指定的边开始。可选值，指定渐变的结束角或边。此值以 to 开始，后跟一个或两个以下关键字。其中包括指定结束边的一个关键字，和指定结束角的两个关键字。o 以下值仅可用作第一个值： left 指示渐变在左边结束。 right 指示渐变在右边结束。o 以下值仅可用作第二个值： top 指示渐变在上面结束。 bottom 指示渐变在下面结束。o 不包含任何关键字或角度等价于 to bottom。至少需要两个颜色停止点。每个颜色停止点具有一个或两个组件一个颜色组件和一个可选位置组件。第一个组件定义渐变停止点的颜色组件。每个停止点具有其自己指定的颜色，并且每个点之间

18、的区域使用从一种颜色到另一种颜色的连续的颜色过渡填充。此值可以是任意支持的颜色值。每个停止点可以具有一个可选百分比或支持的长度值，用于指示在沿渐变线的何处放置颜色停止点。0%（或 0px、0em 等等）指示开始点（或边）；100% 指示停止点（或边）。 repeating-linear-gradient 函数的语法等同于 linear-gradient 函数的语法。在到达上个颜色停止点后，渐变从第一个颜色停止点处重新开始并重复。最好的方法是指定第一次和最后一次颜色停止点具有相同颜色，以防止每次重复组之间的突兀的颜色更改。以下示例介绍重复的线性渐变。它在两种颜色 蓝色和黄色 - 间过渡。CSSb

19、ackground-image: repeating-linear-gradient(#00A3EF, #FFF133 30px, #00A3EF 50px);重复径向渐变的基本语法如下所示：repeating-radial-gradient( | at ? , | at , ? , +)函数描述repeating-radial-gradient()通过首先定义一个中心点，然后定义最终圆形或椭圆形的大小和形状 如果是椭圆形 或 100%，然后定义二者之间的颜色停止点，之间以逗号分隔，来指定重复径向渐变。属性的可能值以下所示：可选值，用于指定渐变的结束形状。如果省略此值，则结束形状为圆形（如果

20、size 参数为单个长度值），否则为椭圆形。o ellipse 指示渐变采用椭圆形状。o circle 指示渐变采用圆形形状。可选值，用于指定渐变的结束形状的尺寸。其可能值为两个空格分隔的长度值（或百分比）或者一个以下关键字。如果省略此值，则值默认为 farthest-corner。o 一个或两个空格分隔的长度值或两个百分比值。如果指定了一个长度值，则该值指示圆形的半径。如果指定了两个值（长度或百分比），则第一个值表示水平半径，而第二个值表示垂直半径。百分比值是相对于对应的渐变框的尺寸。百分比仅可用于指定椭圆渐变的尺寸，不能用于指定圆形渐变。负值无效。o closest-side 对于圆形渐变

21、，此值指示结束形状为定义了尺寸的圆形，以便可精确地符合最接近其中心的框的边。对于椭圆形渐变，渐变形状为椭圆形尺寸，以便可以精确地符合最接近其中心的框的垂直边和水平边。o closest-corner 确定渐变形状的尺寸，以便精确符合距其中心的框的最接近的角。对于椭圆形渐变，渐变形状具有类似 closest-side 指定的宽度与高度的比率。o farthest-side 类似于 closest-side，除了确定渐变形状的尺寸以符合距其中心最远的框的边（对于圆形渐变）或最远的垂直或水平边（对于椭圆形渐变）。o farthest-corner 确定渐变的尺寸，以便可以精确符合距其中心最远的框的角

22、。对于椭圆形渐变，渐变形状具有与类似 farthest-side 指定的宽度与高度的比率。可选值，用于指定渐变的中心。此值可以选取与 background-position 属性相同的值。如果省略此值，则默认为 center。至少需要两个颜色停止点。每个颜色停止点具有一个或两个组件一个颜色组件和一个可选位置组件。第一个组件定义渐变的停止点的颜色组件。每个停止点具有其自己的指定的颜色，并且每个停止点之间的区域使用从一个颜色到另一个颜色的连续颜色过渡进行填充。此值可以是任意支持的颜色值。第二个组件是可选百分比值或十进制值，用于指示沿渐变射线的何处（类似指向 linear-gradient中的渐变线

23、，但不是从中心向外发射）定位颜色停止点。0% 指示渐变射线的开始，而 100% 指示渐变射线与结束形状相交的点。例如，值 20% 指示颜色停止点应位于渐变射线长度的 20% 处的点，从线的开始处算起。该值可以为负值，指示该值指定的颜色位于到渐变中心处下一颜色的中间过渡位置，以便中心处的可见颜色将是指定颜色和下一颜色之间的某个颜色。该值可以大于 100%，用于指定具渐变中心相对最大距离的位置。 repeating-radial-gradient 函数的语法等同于 radial-gradient 函数的语法。在到达上个颜色停止点后，渐变从第一个颜色停止点处重新开始并重复。最好的方法是指定第一次和最

24、后一次颜色停止点具有相同颜色，以防止每次重复组之间的突兀的颜色更改。以下声明创建重复圆形渐变。CSSbackground-image: repeating-radial-gradient(closest-side circle at 40px 50px, #FFF133, #16D611, #00A3EF);以下声明创建重复椭圆形渐变。CSSbackground-image: repeating-radial-gradient(closest-side at 40px 50px, #FFF133, #16D611, #00A3EF, #FFF133);相关主题CSS 渐变生成器CSSInternet Explorer 10 开发者指南