Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

我們的志工尚未將此文章翻譯為 正體中文 (繁體) 版本。加入我們,幫忙翻譯!

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 a preferred ratio. Its concrete size will match the one of the element it applies to.

There are three kinds of color gradients:

  • linear gradients, generated by the linear-gradient() function, where the color smoothly fades along an imaginary line.
    body { 
    background: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
    background: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
    background: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
    background: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
    background: 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.
    body {
    background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent;
    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.
    body {
    background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
    background: repeating-linear-gradient(to top left, 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

文件標籤與貢獻者

 最近更新: Sebastianz,