MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

这篇翻译不完整。请帮忙从英语翻译这篇文章

CSS radial-gradient() 函数创建一个<image>,用来展示由原点(渐变中心)辐射开的颜色渐变。这个方法得到的是一个CSS<gradient>数据类型的对象。

径向渐变(Radial gradients)由其中心点边缘形状轮廓及位置、色值结束点(color stops)定义而成。  径向渐变的中心点至边缘形状以及其延伸的部分,由连续缩放的若干同心轮廓组成,这个轮廓由设定的边缘形状决定。色值结束点用于设定虚拟渐变射线(virtual gradient ray)的变化方式,由中心点水平变化至右侧(如图)。色值结束点由百分比设定时,则是相对于终点为渐变射线与边缘形状相交点的渐变半径,渐变半径的终点位置即为100%。每个轮廓均为纯色,颜色由渐变射线上相应横切点所定义的颜色决定。

边缘形状只能为圆形或者椭圆形

与其他渐变相同,CSS径向渐变不属于CSS <color>数据类型,而是一个不固定尺寸的图片,譬如,它没有默认尺寸、比例。具体尺寸由它所定义的元素尺寸决定。

radial-gradient方法不允许循环渐变。如需要循环渐变,请使用CSS的repeating-radial-gradient 方法。

语法

Formal grammar: radial-gradient( [ circle || <length> ] [ at <position> ]? ,
| [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? ,
| [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? ,
| at <position> ,
<color-stop> [ , <color-stop> ]+ )
\------------------------------------------------------------------------------/\--------------------------------/ 

// Definition of the contour, size and position of the ending shape List of color stops 
where 
<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side 
and 
<color-stop> = <color> [ <percentage> | <length> ]? 

// Definition of the ending shape 
radial-gradient( circle, … ) /* Synonym of radial-gradient( circle farthest-corner, …) */ 
radial-gradient( ellipse, … ) /* Synonym of radial-gradient( ellipse farthest-corner, …) */ 
radial-gradient( <extent-keyword>, … ) /* It draws a circle */ 
radial-gradient( circle radius, … ) /* A centered circle of the given length. It can't be a percentage */ 
radial-gradient( ellipse x-axis y-axis, … ) /* The two semi-major axis are given, horizontal, then vertical */ 

// Definition of the position of the shape 
radial-gradient (… at <position>, … ) 

// Definition of the color stops 
radial-gradient (…, <color-stop>) 
radial-gradient (…, <color-stop>, <color-stop>) 

<position>
<position>background-position或者transform-origin类似。如缺省,默认为中心点。
<shape>
渐变的形状。圆形(渐变的形状是一个半径不变的正圆)或椭圆形(轴对称椭圆)。默认值为椭圆。
<size>
渐变的尺寸大小。包含的值见下表尺寸常数表
<color-stop>
表示某个确定位置的固定色值,包含一个<color>值加上可选的位置值(相对虚拟渐变射线的<percentage>或者<length>长度值)。 百分比值0%,或者长度值0,表示渐变中心点;百分比值100%表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。
<extent-keyword>
关键字用于描述边缘轮廓的具体位置。以下为关键字常量:
常量 描述
closest-side 渐变的边缘形状与容器距离渐变中心点最近的一边相切(圆形)或者至少与距离渐变中心点最近的垂直和水平边相切(椭圆)。
closest-corner 渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
farthest-side 与closest-side相反,边缘形状与容器距离渐变中心点最远的一边相切(或最远的垂直和水平边)。
farthest-corner 渐变的边缘形状与容器距离渐变中心点最远的一个角相交。
Early drafts included other keywords (cover and contain) as synonyms of the standard farthest-corner and closest-side respectively. Use the standard keywords only, as some implementations have already dropped those older variants.

Examples

ellipse farthest-corner
background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
470px 47px
background-image: radial-gradient(ellipse farthest-corner at 470px 47px , #FFFF80 20%, rgba(204, 153, 153, 0.4) 30%, #E6E6FF 60%);
farthest-corner
background-image: radial-gradient(farthest-corner at 45px 45px , #FF0000 0%, #0000FF 100%);
16px radius fuzzy circle
background-image: radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);

规范

Specification Status Comment
CSS Image Values and Replaced Content Module Level 3
radial-gradients()
Candidate Recommendation  

浏览器兼容性

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support (support for the radial-gradient() function, but not necessary with the final syntax) 3.6 (1.9.2)-moz [3]
16 (16)
10.0 (534.16)-webkit [2][3] 10.0 [1] 11.60-o 5.1-webkit[2]
Legacy webkit syntax 未实现 3-webkit [2] 未实现 未实现 4.0-webkit [2]
at syntax (final standard syntax) 10 (10)-moz [3]
16 (16)
未实现 10.0 11.60-o [3]
Presto 2.12 will remove the prefix.
未实现
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (support for the radial-gradient() function, but not necessary with the final syntax) (Yes) 1.0 (1.9.2)-moz [3]
16.0 (16)[3]
(Yes) (Yes) (Yes)
Legacy webkit syntax ? 未实现 ? ? ?
at syntax (final standard syntax) ? 10.0 (10)-moz [3]
16.0 (16)
? ? ?

[1] Internet Explorer 5.5 through 9.0 supports proprietary filter: progid:DXImageTransform.Microsoft.Gradient() filter.

[2] WebKit since 528 supports the legacy -webkit-gradient(radial,…) function. See also their current support for radial gradients.

[3] Firefox 3.6 and Webkit implemented, prefixed, an early syntax.

[4]Before Firefox 36, Gecko didn't apply gradient on the pre-multiplied color space, leading to shade of grey unexpectedly appearing when used with transparency.

See also

文档标签和贡献者

 最后编辑者: xgqfrms-GitHub,