We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

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 Images Module Level 3
radial-gradients()
Candidate Recommendation  

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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,