css线性渐变_CSS线性渐变

css线性渐变

Modern browsers (Firefox 3.6+, Safari 4+, all versions of Chrome, Opera and IE 10+) support gradients in CSS. The syntax for gradients has seen many iterations, improvements and variations since it was first proposed by Apple in 2008; this article focuses on the final unprefixed specification. Older browsers will require prefixed values and variations on the syntax, or an SVG solution; I suggest using one of the gradient generators at the end of this article to create the full range of values to support all browsers.

现代浏览器(Firefox 3.6 +，Safari 4 +，Chrome，Opera和IE 10+的所有版本)都支持CSS中的渐变。 自从Apple于2008年首次提出渐变以来，渐变语法已经经历了许多迭代，改进和变化。 本文重点介绍最终的无前缀规范。 较旧的浏览器将需要前缀值和语法变体或SVG解决方案； 我建议在本文末尾使用其中一个渐变生成器来创建完整的值范围，以支持所有浏览器。

At its most basic, the syntax for a linear gradient is very simple:

从根本上讲，线性渐变的语法非常简单：

body {
	background-image: linear-gradient(#a00, black);
}

Linear gradients have just two required values: starting color and ending color. By default, the gradient direction is top-to-bottom, but may be specified as a keyword (top, left, bottom, right), a pair of keywords representing a corner (bottom right, for example) or an angle. If keywords are used, they must be preceded by to; angles are specified in the same way as CSS transforms, as bearing directions (i.e. 0deg is north, or the 12 o'clock position, with angles growing to the right (clockwise)).

线性渐变只有两个必需的值：开始颜色和结束颜色。 默认情况下，梯度方向是顶部至底部，但也可以指定为关键字( top ， left ， bottom ， right )，一对代表一个角落的关键字( bottom right ，例如)或角度。 如果使用的关键字，它们必须在前面加to ; 以与CSS转换相同的方式指定角度，即方位方向(即0deg向北或12点钟的位置，角度向右(顺时针)增大)。

The color values may be specified in any method supported by CSS: keywords, hexadecimals, rgb, rgba, or hsl values.

可以使用CSS支持的任何方法来指定颜色值： 关键字 ， 十六进制 ， rgb ， rgba或hsl值。

While gradients are technically images, and should be applicable anywhere images are used on a web page, most browsers currently support the use of gradients only in backgrounds, so it is that use that I’ll show here.

尽管渐变从技术上讲是图像，并且应该适用于网页上使用图像的任何位置，但是大多数浏览器当前仅支持在背景中使用渐变，因此我将在此处显示它的用途。

body {
	background-image: linear-gradient(45deg, #a00, black);
}

By default, colors are equally distributed along the gradient – in this case, red at the starting position (0%), black at the end (100%). If we add intermediary colors, they will be evenly distributed along this continium. If we want to add stops – for example, to have black start from the ⅓^rd point, do the following:

默认情况下，颜色沿渐变均匀分布-在这种情况下，红色在开始位置(0％)，黑色在结束位置(100％)。 如果我们添加中间色，它们将沿着该连续体均匀分布。 如果我们要添加站-例如，有从^第三 ⅓黑点开始，做到以下几点：

body {
	background-image: linear-gradient(#a00, black 33%);
}

You can add as many colors as you wish into this gradient, each with their own individual stops – in fact, you could copy them directly from PhotoShop’s gradient tool.

As they are treated as just another image, it's entirely possible to combine gradients with background images, as shown in the Pop Art CSS3 Backgrounds article.

您可以在此渐变中添加任意数量的颜色，每种颜色都有自己的停止点–实际上，您可以直接从PhotoShop的渐变工具中复制它们。 由于它们只是另一幅图像，因此完全有可能将渐变与背景图像结合起来，如波普艺术CSS3背景文章中所示 。

Note that gradients will automatically extend the complete height and width of the element, although the actual computed height of the element is often different from its perceived “visual” height. Visual misapplication of gradients is often due to not having the element sized correctly: this is especially true in the body, which often needs a min-height: 100% or min-height: 100vh declaration in order to have the gradient extend fully to the bottom of the browser window.

请注意，尽管元素的实际计算出的高度通常与其感知的“视觉”高度不同，但渐变会自动扩展元素的整个高度和宽度。 渐变在视觉上的误用通常是由于元素尺寸不正确：在body尤其如此，通常需要使用min-height: 100%或min-height: 100vh声明，以使渐变完全扩展到浏览器窗口的底部。

翻译自: https://thenewcode.com/231/CSS-Linear-Gradients

css线性渐变