在线文档教程
CSS

渐变 | <gradient>

<gradient>

<gradient>css数据类型是css。<image>由两种或更多种颜色之间的渐进式转换而成。CSS梯度没有内在维度也就是说,它没有自然的或优先的大小,也没有优先的比率。它的具体大小将与它所应用的元素的大小相匹配。

与涉及颜色的任何插值一样,在alpha预乘颜色空间中计算渐变。这样可以防止在颜色和不透明度变化时(除了在较旧的浏览器中使用透明关键字时)出现意外的灰色阴影。

梯度类型

线性梯度

生成的linear-gradient()功能。颜色沿着一条假想的线平稳地过渡。

body { background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet }

径向梯度

radial-gradient()功能。离原点越远,与原点的颜色越不相同,越接近下一个颜色。

body { background: radial-gradient(red, yellow, rgb(30, 144, 255) }

重复梯度

生成的repeating-linear-gradient()repeating-radial-gradient()职能。它会重复所需的内容,以填充整个元素。

body { background: repeating-linear-gradient(to top left, lightpink, lightpink 5px, white 5px, white 10px }

规格

SpecificationStatusComment
CSS Image Values and Replaced Content Module Level 3The definition of '<gradient>' in that specification.Candidate RecommendationInitial definition.

浏览器兼容性