您的搜索结果

    <gradient>

    我们的志愿者还没有将这篇文章翻译为 中文 (简体) 。加入我们帮助完成翻译!

    Summary

    The <gradient> CSS data type denotes a CSS <image> made of a progressive transition between two or more colors. A CSS gradient is not a CSS <color> but an image with no intrinsic dimensions; that is, it has no natural or preferred size, nor ratio. Its concrete size will match the one of the element it applies to.

    There are several types of colors gradients:

    • linear gradients, generated by the linear-gradient() function, where the color smoothly fades along an imaginary line.
      A rainbow made from a gradient
      background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
      
    • radial gradients, generated by the radial-gradient() function. The more away from an origin a point is, the more far from the original color it is.
      Radial gradient
      background: radial-gradient(red, yellow, rgb(30, 144, 255));
      
    • repeating gradients, which are fixed sized linear or radial gradients repeated as much as needed to fill the entire box.
      Repeating gradient
      background: repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
      

    Like with any case involving interpolation of colors, gradients are calculated in the alpha-premultiplied color space. This prevents unexpected shades of grey to appear when both the color and the opacity are varying.

    Specification

    Specification Status Comment
    CSS Image Values and Replaced Content Module Level 3
    The definition of '<gradient>' in that specification.
    Candidate Recommendation  

    Browser compatibility

    Each different gradient type has a different compatibility matrix. Please consult each individual article.

    See also

    文档标签和贡献者

    对本页有贡献的人: Sheppy, groovecoder, ethertank, kscarfone, Inkbug, teoli, brianloveswords
    最后编辑者: teoli,