mozilla
您的搜索结果

    使用CSS渐变

    这篇翻译不完整。请帮忙从英语翻译这篇文章

    使用

    CSS 渐变 是在 CSS3 Image Module 中新增加的 <image> 类型. 使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果. 用它代替图片,可以加快页面的载入时间、减小带宽占用。同时,因为渐变是由浏览器直接生成的,它在页面缩放时的效果比图片更好,因此你可以更加灵活、便捷的调整页面布局。

    浏览器支持两种类型的渐变:线性渐变 (linear),通过 linear-gradient 函数定义,以及 径向渐变 (radial),通过 radial-gradient 函数定义.

    线性渐变

    为了创建一个线性渐变,你需要设置一个起始点和一个方向(指定为一个角度)的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡,并且你必须指定至少两种,当然也会可以指定更多的颜色去创建更复杂的渐变效果。

    简单线性渐变

    这里是一个线性渐变从中间(水平方向)和顶部(垂直方向)开始,起始于蓝色,过渡到白色.

    屏幕截图 现场演示
     
    /* The old syntax, deprecated, but still needed, prefixed, for WebKit-based and old browsers */
    background: -prefix-linear-gradient(top, blue, white); 
    
    /* The new syntax needed by standard-compliant browsers (Opera 12.1, IE 10, Fx 16 onwards), without prefix */
    background: linear-gradient(to bottom, blue, white);
    

    (查看 浏览器兼容列表 概述前缀的必要性以支持不同的浏览器版本)。

    改变相同的渐变从左到右运行:

    屏幕截图 现场演示
    basic_linear_blueleft.png
     
    /* The old syntax, deprecated, but still needed, prefixed, for WebKit-based and old browsers */
    background: -prefix-linear-gradient(left, blue, white); 
    
    /* The new syntax needed by standard-compliant browsers (Opera 12.1, IE 10, Fx 16 onwards), without prefix */
    background: linear-gradient(to right, blue, white); 

    (查看 浏览器兼容列表 概述前缀的必要性以支持不同的浏览器版本)。

    你可以通过指定平行和垂直的开始位置让渐变倾斜,例如:

    屏幕截图 现场演示
    basic_linear_bluetopleft.png
     
    /* The old syntax, deprecated, but still needed, prefixed, for WebKit-based and old browsers */
    background: -prefix-linear-gradient(left top, blue, white); 
    
    /* The new syntax needed by standard-compliant browsers (Opera 12.1, IE 10, Fx 16 onwards), without prefix */
    background: linear-gradient(to bottom right, blue, white);
    

    使用角度

    如果你不指定一个角度,这个将自动基于给定的方向。如果你更喜欢控制渐变的方向,你可以设置特定的角度。

    例如,这两个渐变,第一个方向朝右,第二个有个70度的角。

    linear_gradient_angle.png

    右边的这个使用的是这样的CSS样式:

    background: linear-gradient(70deg, black, white);
    

    角度是指水平线与渐变线之间的角度,以逆时针方向旋转。总之,0deg 创建一个从底部到顶部的垂直渐变,当变成90deg时生成一个从左到右的水平渐变。

    linear_redangles.png

    background: linear-gradient(<angle>, red, white);
    

    注意: 几个浏览器实现前缀,在旧稿的规格中 0deg 是指右部而不是顶部。当是混合前缀和标准线性渐变时要特别注意角度的值。一个简单的公式:90 - x = y,x 是标准用法,而 y是非标准,浏览器引擎前缀用法。

    Color stops

    Color stops are points along the gradient line that will have a specific color at that location. The location can be specified as either a percentage of the length of the line, or as an absolute length. You may specify as many color stops as you like in order to achieve the desired effect.

    If you specify the location as a percentage, 0% represents the starting point, while 100% represents the ending point; however, you can use values outside that range if necessary to get the effect you want.

    Example: Three color stops

    This example specifies three color stops:

    Screen Shot Live Demo
    linear_colorstops1.png
     
    /* The old syntax, deprecated, but still needed, prefixed, for WebKit-based and old browsers */
    background: -prefix-linear-gradient(top, blue, white 80%, orange);
    
    /* The new syntax needed by standard-compliant browsers (Opera 12.1, IE 10, Fx 16 onwards), without prefix */
    background: linear-gradient(to bottom, blue, white 80%, orange);
    

    Note that the first and last color stops don't specify a location; because of that, values of 0% and 100% are assigned automatically. The middle color stop specifies a location of 80%, putting it most of the way toward the bottom.

    Example: Evenly spaced color stops

    Here's an example using a wide variety of colors, all evenly spaced:

    Screen Shot Live Demo
    linear_rainbow.png
     
    /* The old syntax, deprecated, but still needed, prefixed, for WebKit-based and old browsers */
    background: -prefix-linear-gradient(left, red, orange, yellow, green, blue);
    
    /* The new syntax needed by standard-compliant browsers (Opera 12.1, IE 10, Fx 16 onwards), without prefix */
    background: linear-gradient(to right, red, orange, yellow, green, blue);
    

    Notice that the color stops are automatically spaced evenly when no locations are specified.

    Transparency and gradients

    Gradients support transparency. You can use this, for example, when stacking multiple backgrounds, to create fading effects on background images. For example:

    for Transparency and gradients example

    /* The old syntax, deprecated, but still needed, prefixed, for WebKit-based and old browsers */ 
    background: -prefix-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);
    
    /* The new syntax needed by standard-compliant browsers (Opera 12.1, IE 10, Fx 16 onwards), without prefix */  
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);
    

    The backgrounds are stacked with the first specified background on top, and each successive background farther away. By stacking backgrounds this way, you can create very creative effects as seen above.

    Radial gradients

    Radial gradients are specified using the radial-gradient functional notation. The syntax is similar to that for linear gradients, except you can specify the gradient's ending shape (whether it should be a circle or ellipse) as well as its size. By default, the ending shape is an ellipse with the same proportions than the container's box.

    Color stops

    You specify color stops the same way as for linear gradients. The gradient line extends out from the starting position in all directions.

    Example: Evenly spaced color stops

    By default, as with linear gradients, the color stops are evenly spaced:

    Screen Shot Live Demo
    radial_gradient_even.png
     
    background: radial-gradient(red, yellow, rgb(30, 144, 255));
    

    Example: Explicitly spaced color stops

    Here we specify specific locations for the color stops:

    Screen Shot Live Demo
    radial_gradient_varied.png
     
    background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%);
    

    Size

    This is one of the areas in which radial gradients differ from linear gradients. You can provide a size value that specifies the point that defines the size of the circle or ellipse. See this description of the size constants for specifics.

    Example: closest-side for ellipses

    This ellipse uses the closest-side size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.

    Screen Shot Live Demo
    radial_ellipse_size1.png
     
    background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);
    

    Example: farthest-corner for ellipses

    This example is similar to the previous one, except that its size is specified as farthest-corner, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.

    Screen Shot Live Demo
    radial_ellipse_size2.png
     
    background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);
    

    Example: closest-side for circles

    This example uses closest-side, which determines the circle's size as the distance between the start point (the center) and the closest side.

    Screen Shot Live Demo
    radial_circle_size1.png
     
    background: radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);
    

    Here, the circle's radius is half the height of the box, since the top and bottom edges are equidistant from the start point and are closer than the left and right edges.

    Repeating gradients

    The linear-gradient and radial-gradient properties don't support automatically repeating the color stops. However, the repeating-linear-gradient and repeating-radial-gradient properties are available to offer this functionality.

    Examples: Repeating linear gradient

    This example uses repeating-linear-gradient to create a gradient:

    Screen Shot Live Demo
    repeating_linear_gradient.png
     
    background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
    

    Another example using the repeating-linear-gradient property.

    repeat_background_gradient_checked.png

    background-color: #000;
    background-image: repeating-linear-gradient(90deg, transparent, transparent 50px,
          rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px,
          rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px,
          rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
    repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px,
          rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px,
          rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px,
          rgba(255, 206, 0, 0.25) 166px),
    repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
          rgba(143, 77, 63, 0.25) 10px),
    repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
          rgba(143, 77, 63, 0.25) 10px);
    

    Example: Repeating radial gradient

    This example uses repeating-radial-gradient to create a gradient:

    Screen Shot Live Demo
    repeating_radial_gradient.png
     
    background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
    

    See also

    文档标签和贡献者

    此页面的贡献者有: RogerShen, anjianshi
    最后编辑者: RogerShen,