css3之gradient

• radial-gradient

　　The CSS radial-gradient() function creates an <image> which represents a gradient of colors radiating from an origin, thecenter of the gradient. The result of this function is an object of the CSS <gradient> data type.　　

　　radial-gradient()创建一个从园点开始颜色渐变的图片，这方法的结果是一个<gradient>的对象。

Radial gradients are defined by their center, the ending shape contour and position, and color stops.径向渐变由 [ 中心点、结束轮廓线、位置、颜色停止位 ]定义。The radial gradient consists, going from its center to its ending shape and potentially beyond, of successive uniformly-scaled concentric shapes, identical to the ending shape. 径向渐变的组成是，从中心点到结束轮廓线再到边界，是连续的均匀缩放的同心形状，与结束轮廓线的形状一样。Color stops are positioned on a virtual gradient ray going out horizontally of the center and going to the right. 颜色停止位是在一条水平的，从中心点往右的，虚拟渐变线上。Percentages positioning of color stops are relative to the intersection between the ending shape and this gradient ray representing 100%.百分比的定位是基于结束轮廓线与渐变放射线的交点，在0%到100…%之间。 Each shape is monocolor and defined by the color on the gradient ray it intersects.每一个形状都是纯色的，并且颜色由其相交的渐变放射线来定义。Ending shapes can only be circle or ellipse.结束轮廓线只能是圆形或者椭圆形。 （ 感觉“结束轮廓线”比“形状”好点 ）

　　Like any other gradient, a CSS radial gradient is not a CSS <color> but an image with no intrinsic dimensions,就像其他渐变一样，径向渐变不是color而是一张没有固定维度（width*height）的图片 i. e. it has no natural or preferred size, nor ratio.换言之，它没有默认的/首选的大小/比例。 Its concrete size will match the one of the element it applies to.它具体的大小是由其所在元素决定

　　The radial-gradient function does not allow repeating gradients. For such a functionality, use the CSS repeating-radial-gradient function.径向渐变方法不允许重复渐变。要实现这个功能，使用repeat-radial-gradient方法

• Values

<position>

A  <position>, interpreted in the same way as  background-position or  transform-origin. If omitted, the default is  center.定位与background-position或者transform-origin的写法一样。如果省略，默认是center。

<shape>

The gradient's shape. This is one of  circle (meaning that the gradient's shape is a circle with constant radius) or  ellipse(meaning that the shape is an axis-aligned ellipse). The default value is  ellipse.渐变形状，一是圆形（恒定半径），二是椭圆（轴对齐椭圆），默认的是椭圆。

<size>

The size of the gradient. This is one of the  Size constants listed below. 渐变大小 at 20px 20px

Keywords describing how big the ending shape must be. The possible keywords are: 描述结束轮廓线大小的可用关键字：(-webkit前缀不支持，请使用radial-gradient。)

Constant	Description
closest-side	The gradient's ending 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). 渐变形状的大小根据起始点（center）与最近的边的距离决定
closest-corner	The gradient's ending shape is sized so it exactly meets the closest corner of the box from its center.  渐变形状的大小根据起始点（center）与最近的角的距离决定
farthest-side	Similar to closest-side, except the ending shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides). 渐变形状的大小根据起始点（center）与最远的边的距离决定
farthest-corner	The gradient's ending shape is sized so it exactly meets the farthest corner of the box from its center.   渐变形状的大小根据起始点（center）与最远的角的距离决定

<color-stop>

Representing a fixed color at a precise position, this value is composed by a  <color> value, followed by an optional stop position (either a  <percentage> or a  <length> along the virtual gradient ray). 代表在确定的位置有确定的颜色，由一个颜色值，和紧跟一个可选的定位。A percentage of  0%, or a length of  0, represents the center of the gradient, the value  100% the intersection of the ending shape with the virtual gradient ray. Percentage values in-between. are linearily positioned on the gradient ray.0或者0%表示渐变的起始点，100%表示结束轮廓线与虚拟渐变放射线的交点位置。百分比取值区间是渐变反射线上线性递增。

ps: 重复渐变

background:repeating-linear-gradient(black 10px,white 20px);

background:repeating-radial-gradient(circle closest-side,#000 0%,#fff 10%);