이 문서는 아직 자원 봉사자들이 한국어로 번역하지 않았습니다. 함께 해서 번역을 마치도록 도와 주세요!
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,
fscholz,
phistuck,
teoli,
Sheppy,
jlin,
kscarfone,
ethertank,
Inkbug,
groovecoder,
brianloveswords
최종 변경:
Sebastianz,