repeating-radial-gradient()

版本： CSS3

CSS函数 repeating-radial-gradient()创建一个从原点辐射的重复渐变组成的 image 。它类似于radial-gradient 并且采用相同的参数，但是它会在所有方向上重复颜色，以覆盖其整个容器。函数的结果是 gradient 数据类型的对象，是一种特殊的 image 类型。

示例

/* 一个从容器中心点开始的重复渐变,
   从红色开始，渐变到蓝色，再渐变到绿色 */
repeating-radial-gradient(circle at center, red 0, blue, green 30px);

每次重复时，色标位置的偏移量都是基准渐变长度（最后一个色标和第一个之间的距离）的倍数。因此，最后色标的色值应该与第一个色标的色值保持一致；如果不一致的话，会导致非常突兀的渐变效果。与其他渐变一样，线形重复渐变没有提供固定的尺寸；即，它没有原始尺寸或首选尺寸，也没有首选的比列。它将自适应于对应元素的尺寸。

浏览器支持


IE10以上版本的浏览器都支持 `repeating-radial-gradient()`

语法：

repeating-radial-gradient ( <position> | <angle> | <shape> | <extent-keyword> | <color-stop> )

取值：

<position> ：position与 background-position 或者 transform-origin类似。默认值为 center。
<angle> ：渐变轴的角度。角度顺时针增加，默认值为0deg。
<shape> ：渐变的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对称椭圆）。默认值为椭圆。默认值为椭圆形，即 ellipse。

<extent-keyword> ：关键字用于描述边缘轮廓的具体位置。以下为关键字常量：

常量	描述
`closest-side`	渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
`closest-corner`	渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
`farthest-side`	与closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
`farthest-corner`	渐变的边缘形状与容器距离渐变中心点最远的一个角相交。

<color-stop> ：表示某个确定位置的固定色值，包含一个 <color> 值加上可选的位置值（相对虚拟渐变射线的 <percentage> 或者 <length> 长度值）。百分比值0%，或者长度值0，表示渐变中心点；百分比值100%表示渐变射线与边缘形状相交的点。其间的百分比值线性对应渐变射线上的点。

例子

径向渐变沿着一条轴线进行渲染。在每个轴线的端点处可以指定一个半径。可以想象为创建了两个“圆”，每个圆的中心位置用点指定，大小由半径值指定。渐变从内圆的圆周向外延伸到外圆的圆周。

黑白相间的渐变

<div id="grad1">black white</div>

div {
  display: block;
  width: 50%;
  height: 80px;
  padding: 10px;
}
#grad1 {
  background: -webkit-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
  background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
  background: -ms-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
  background: -o-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
  text-shadow: 1px 1px 0pt black;
  color: white;
  border: 1px solid black;
  height:5.5em;
}

background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);

Farthest-corner渐变

<div id="grad1">farthest-corner</div>

div {
  display: block;
  width: 50%;
  height: 80px;
  border-radius: 10px;
  padding: 10px;
}
#grad1 {
  background: -webkit-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
  background: -moz-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
  background: -ms-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
  background: -o-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
  background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
  text-shadow: 1px 1px 0pt blue;
  color: white;
  border: 1px solid black;
  height:5.5em;
}

background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);

返回CSS导航

repeating-radial-gradient()

示例

浏览器支持

语法：

取值：

例子

黑白相间的渐变

Farthest-corner渐变