渐变术语和想法 (Gradient Terms and Ideas)

Gradients provide a method to, over a customizable amount of space, transition from one color to another.  Gradients come in two variants:  linear (one consistent gradient) and radial (circular).  While gradients are obviously graphical elements, they're simplistic in creation which makes them outstanding candidates for simple, programmatic creation via CSS.  CSS3 introduced CSS gradients but their implementation took longer than we all wanted.

渐变提供了一种方法，可以在可自定义的空间量内从一种颜色过渡到另一种颜色。 梯度有两种变体： linear (一个一致的梯度)和radial (圆形)。 尽管渐变显然是图形元素，但它们在创建时过于简单，这使其成为通过CSS进行简单的程序化创建的出色候选者。 CSS3引入了CSS渐变，但是其实现花费的时间比我们所有人想要的时间长。

CSS线性渐变语法 (CSS Linear Gradient Syntax)

The linear gradient implementations are different in each browser but there is a set standard:

每种浏览器中的线性渐变实现都不同，但是有一套标准：

background-image: linear-gradient(
   
     || 
    
     ,]? 
     
      , 
      
        [, 
       
        ]* )
       
      
     
    
   

The first argument is the point of which to start the gradient or the angle at which the gradient should be drawn.  The subsequent arguments are "color stops" along the gradient.  Two color stops are required (start and end), but any number of color stops can be added for increased customization of the gradient.  Color stops can include just a color or a color and percentage or point:

第一个参数是开始渐变的点或应绘制渐变的角度。 后续参数是沿渐变的“颜色停止”。 需要两个色标(开始和结束)，但是可以添加任意数量的色标以增加渐变的自定义。 色标可以仅包括颜色或颜色以及百分比或点：

/* old:  color-stop(percentage/amount, color) */
color-stop(0.20, red)

/* current:  color _ percentage/amount */
#dea222 20%

As is the case with most newer, advanced CSS capabilities, each browser tends to provide its own implementation.  WebKit, for example, even has multiple syntaxes.  The following code snippet should cover all the bases for a basic, top-to-bottom linear gradient:

与大多数更新的高级CSS功能一样，每个浏览器都倾向于提供自己的实现。 例如，WebKit甚至具有多种语法。 以下代码段应涵盖基本的从上到下的线性渐变的所有基础：

#example1	{
	/* fallback */
	background-color: #063053;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
	/* chrome 10+, safari 5.1+ */
	background-image: -webkit-linear-gradient(#063053, #395873, #5c7c99);
	/* firefox; multiple color stops */
	background-image: -moz-linear-gradient(top,#063053, #395873, #5c7c99);
	/* ie 6+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
	/* ie8 + */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";
	/* ie10 */
	background-image: -ms-linear-gradient(#063053, #395873, #5c7c99);
	/* opera 11.1 */
	background-image: -o-linear-gradient(#063053, #395873, #5c7c99);
	/* The "standard" */
	background-image: linear-gradient(#063053, #395873, #5c7c99);
}

Note that a basic background-color is provided first.  This background-color is a fallback for browsers that have not yet implemented CSS gradients.  The CSS gradient spec allows for degree'd CSS gradients instead of basic top-to-bottom gradients.  These can be accomplished with the following syntax:

请注意，首先提供了基本的背景色。 对于尚未实现CSS渐变的浏览器，此背景颜色是一个后备选项。 CSS渐变规范允许使用度数CSS渐变，而不是基本的从上到下的渐变。 这些可以通过以下语法完成：

#example2	{
	/* fallback */
	background-color:#063053;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
	/* chrome 10+, safari 5.1+ */
	background-image:-webkit-linear-gradient(45deg, #063053, #395873, #5c7c99);
	/* firefox; multiple color stops */
	background-image:-moz-linear-gradient(45deg, #063053, #395873, #5c7c99);
	/* ie10 */
	background-image: -ms-linear-gradient(45deg, #063053 0%, #395873 100%);
	/* opera 11.1 */
	background-image: -o-linear-gradient(45deg, #063053, #395873);
	/* The "standard" */
	background-image: linear-gradient(45deg, #063053, #395873);
}

Or how about a more ... colorful CSS gradient?  Let's do a rainbow gradient:

还是更多…… 彩色 CSS渐变呢？ 让我们做一个彩虹渐变：

/* example 3 - linear rainbow */
#example3	{
	/* fallback */
	background-color:#063053;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6, blue), color-stop(0.8, purple), color-stop(1, orange));
	/* chrome 10+, safari 5.1+ */
	background-image:-webkit-linear-gradient(red, green, blue, purple, orange);
	/* firefox; multiple color stops */
	background-image:-moz-linear-gradient(top, red, green, blue, purple, orange);
	/* ie10 */
	background-image: -ms-linear-gradient(red, green, blue, purple, orange);
	/* opera 11.1 */
	background-image: -o-linear-gradient(red, green, blue, purple, orange);
	/* The "standard" */
	background-image: linear-gradient(red, green, blue, purple, orange);
}

A quick note about Internet Explorer's gradient support.  Internet Explorer's filter and -ms-filter syntax takes precedence over the newer -ms-linear gradient syntax.  It's best to use IE conditional comments to create reliable gradients:

关于Internet Explorer的渐变支持的快速说明。 Internet Explorer的filter和-ms-filter语法优先于更新的-ms-linear渐变语法。 最好使用IE条件注释来创建可靠的渐变：

<!--[if lt IE 10]>
<style>
.gradientElement {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";
}
</style>
<![endif]-->

Not ideal but reliability is important when designing a website.

在设计网站时，不理想，但可靠性很重要。

CSS径向渐变 (CSS Radial Gradients)

Radial gradients are unlike linear gradients because they don't move from one simple direction to another;  they start with a center-point and move outward at 360 degrees.  Radial gradients are not supported by Internet Explorer at this time, and the browsers that do support radial gradients have had significantly different syntaxes...I'm looking at you, WebKit! WebKit has, however, overhauled their radial gradient syntax.  Here's a brief look at the current-but-soon-to-be-legacy radial gradient code:

径向渐变与线性渐变不同，因为它们不会从一个简单的方向移动到另一个方向。 它们从中心点开始，然后以360度向外移动。 目前，Internet Explorer不支持径向渐变，并且支持径向渐变的浏览器的语法也有明显不同…… 我在看着您，WebKit！ 但是，WebKit已全面改进了其径向渐变语法。 下面简要介绍了当前但很快就会实现的径向渐变代码：

/* basic */
background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red));
/* color stops */
background-image: -webkit-gradient(radial, center center, 0, center center, 220, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6, blue), color-stop(0.8, purple), color-stop(1, orange));

WebKit recently announced its new syntax for creating radial gradients which happens to fall in line with Firefox's implementation:

WebKit最近宣布了用于创建径向渐变的新语法，该语法恰好符合Firefox的实现：

radial-gradient( [
   
     || 
    
     ,]? [
     
       || 
      
       ,]? 
       
        , 
        
         [, 
         
          ]*)
         
        
       
      
     
    
   

This radial gradient syntax works in Firefox 4 and the WebKit nightlies.  There are a number of size constants available with radial gradients:

这种径向渐变语法可在Firefox 4和WebKit Nightnight中使用。 径向渐变有许多尺寸常数可用：

• closest-side: The gradient's shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses).

  closest-side ：渐变的形状与最接近中心的框边相交(对于圆形)，或者与最接近中心的垂直面和水平面相交(对于椭圆形)。

• closest-corner: The gradient's shape is sized so it exactly meets the closest corner of the box from its center.

  closest-corner ：渐变的大小已确定大小，使其恰好与盒子的中心最接近的角。

• farthest-side: Similar to closest-side, except the shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides).

  farthest-side ：与最接近farthest-side相似，不同之处在于形状的大小适合与盒子最远离其中心的一侧(或垂直和水平侧)相交。

• farthest-corner: The gradient's shape is sized so it exactly meets the farthest corner of the box from its center.

  farthest-corner ：渐变的大小已确定大小，以使其恰好与盒子中心相距最远的角。

• contain:  A synonym for closest-side.

  contain ：最接近端的同义词。

• cover:  A synonym for farthest-corner.

  cover ：最远角的同义词。

A basic usage of a radial gradient would look like:

径向渐变的基本用法如下所示：

#example4 {
	background-image: -moz-radial-gradient(orange, red);
	background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red)); /* old */
	background-image: -webkit-radial-gradient(orange, red); /* new syntax */
	background-image: radial-gradient(orange, red);
}

Note that no positioning or size has been given -- simply two color stops to it over the course of the gradient.  Any number of color stops can be used so a simple rainbow gradient would look like:

请注意，没有给出位置或大小-在渐变过程中，只有两个颜色停止。 可以使用任意数量的色标，因此简单的彩虹渐变如下所示：

#example5 {
	background-image: -moz-radial-gradient(red,green,blue,purple,orange);
	background-image: -webkit-gradient(radial, center center, 0, center center, 220, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6,blue), color-stop(0.8,purple), color-stop(1,orange)); /* old */
	background-image: -webkit-radial-gradient(red, green, blue, purple, orange); /* new syntax */
	background-image: radial-gradient(red, green, blue, purple, orange);
}

A more customized radial gradient with positioning and detailed color stops would look like:

具有定位和详细的色标的更自定义的径向渐变如下所示：

#example6 {
	background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
	background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
	background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
}

Note that my examples are using hex colors and px units.  You may use any of the color constructs or measuring units with your gradients.

请注意，我的示例使用的是十六进制颜色和px单位。 您可以将任何颜色构造或测量单位与渐变一起使用。

CSS渐变：技巧和窍门 (CSS Gradients:  Tips and Tricks)

CSS gradients are quite valuable but can be difficult to implement.  Even when you've got the gradient you want, browser support can be different.  Here are a few tips for using CSS gradients:

CSS渐变非常有价值，但可能难以实现。 即使已经有了所需的渐变色，浏览器支持也可能有所不同。 以下是使用CSS渐变的一些技巧：

• Want opacity within your gradients?  Use rgba colors.

  想要渐变不透明吗？ 使用rgba颜色。

• Always use a fallback background so that clients that doesn't support gradients aren't hung out to dry.

  始终使用后备背景，以使不支持渐变的客户端不会挂断。

• Both Firefox and WebKit-based browsers provide prefixed repeating-linear-gradient and repeating-radial-gradient capabilities.  An example of usage:

  Firefox和基于WebKit的浏览器都提供带前缀的repeating-linear-gradient和repeating-radial-gradient功能。 用法示例：

  
  #example7 {
  	background-image: -moz-repeating-linear-gradient(top left -45deg, green, red 5px, white 5px, #ccc 10px);
  	background-image: -webkit-repeating-linear-gradient(-45deg, green, red 5px, white 5px, #ccc 10px);
  }
  

• If gradient are critical (i.e. charting, animation, etc.), I highly recommend using Dojo's GFX library, which is a masterpiece of vector graphic creation.  GFX also allows for radial gradients in Internet Explorer!

  如果渐变至关重要(例如，图表，动画等)，我强烈建议使用Dojo的GFX库，它是矢量图形创建的杰作。 GFX还允许在Internet Explorer中进行径向渐变！

CSS渐变后备 (CSS Gradient Fallbacks)

Older browsers like Internet Explorer 6 and 7, along with Opera and older versions of Firefox, don't support CSS gradients so the best fallback for such cases is defining a regular background property with a color of your choice:

较旧的浏览器(例如Internet Explorer 6和7)以及Opera和较旧的Firefox版本均不支持CSS渐变，因此，在这种情况下，最好的备用方法是定义常规background属性，并选择一种颜色：

/* example 1 - basic */
#example1	{
	/* fallback */
	background-color:#063053;
	/* gradients below */
}

Another option would be to create the gradient a browser that supports CSS gradients, take a screenshot, cut an image of the gradient, and use conditional CSS for the browsers that didn't support CSS gradients.

另一个选择是在支持CSS渐变的浏览器中创建渐变，截取屏幕快照，剪切渐变图像，并对不支持CSS渐变的浏览器使用条件CSS 。