非常教程

CSS参考手册

图像值 | Image Values

重复径向渐变 | repeating-radial-gradient()

repeating-radial-gradient()创建一个由重复的梯度从原点辐射的<image>。它类似于radial-gradient(), 并采取相同的参数, 但它重复的颜色停止无限在所有方向, 以覆盖其整个容器。函数的结果是<gradient>数据类型的一个对象,这是一种特殊的类型<image>

/* A repeating gradient at the center of its container,
   starting red, changing to blue, and finishing green */
repeating-radial-gradient(circle at center, red 0, blue, green 30px);

每重复一次,彩色光圈的位置偏移基本径向梯度的尺寸(最后一个彩色光圈和第一个颜色光圈之间的距离)的倍数。因此,每个结束彩色停止的位置与起始彩色停止一致; 如果颜色值不同,这将导致一个清晰的视觉过渡。

与任何梯度一样,重复的径向梯度具有没有内在维度也就是说,它没有自然的或优先的大小,也没有优先的比率。它的具体大小将与它所应用的元素的大小相匹配。

使用说明:由于<gradient>属于<image>数据类型,因此只能在可以使用<image>的地方使用。出于这个原因,repeating-radial-gradient()将不能在background-color其他使用<color>数据类型的属性上工作。

句法

取值

<position>渐变的位置,以与background-position或相同的方式解释transform-origin。如果未指定,则默认为center<angle>渐变线的角度,从此角度的起点延伸。如果未指定,则默认为0deg<shape>渐变的形状。值可以是circle(意思是渐变的形状是一个具有恒定半径的圆)或ellipse(意思是该形状是一个轴对齐的椭圆)。如果未指定,则默认为ellipse<extent-keyword>描述结尾形状必须有多大的关键字。可能的值是:

Keyword

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).

closest-corner

The gradient's ending shape is sized so that it exactly meets the closest corner of the box from its 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).

farthest-corner

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

注意:此函数的早期实现包括其他关键字(covercontain)作为标准的同义词farthest-cornerclosest-side分别。仅使用标准关键字,因为某些实现已经删除了这些旧的变体。

<color-stop>一个颜色停止的<color>值,后跟一个可选的停止位置(<percentage><length>沿着渐变轴)。百分比0%或长度0代表渐变的中心; 该值100%表示结束形状与虚拟梯度射线的交集。两者之间的百分比值线性定位在梯度射线上。

形式语法

repeating-radial-gradient( 
       [[ circle  || <length> ]                     [at <position>]? , | 
        [ ellipse || [<length> | <percentage> ]{2}] [at <position>]? , |
        [[ circle | ellipse ] || <extent-keyword> ] [at <position>]? , |
                                                     at <position>   ,    <color-stop> [ , <color-stop> ]+ )
        \---------------------------------------------------------------/\--------------------------------/
                  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> ]?

实例

径向梯度沿轴运动。在轴的每个端点,指定一个半径。这可以想象为创建两个“圆”,其中每个圆的中心由点指定,半径由半径长度指定。梯度从内圆的圆周向外圆的圆周向外延伸。

黑白梯度

<div id="grad1">Black white</div>
div {
  display: block;
  width: 50%;
  height: 80px;
  border-color: #000000;
  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);

最远角

<div id="grad1">Farthest-corner</div>
div {
  display: block;
  width: 50%;
  height: 80px;
  border-radius: 10px;
  border-color: #000000;
  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%);

规格

Specification

Status

Comment

CSS Image Values and Replaced Content Module Level 3The definition of 'repeating-radial-gradient()' in that specification.

Candidate Recommendation

Initial definition.

浏览器兼容性

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Basic support (on background and background-image)

10 -webkit

3.6 (1.9.2)-moz 16 (16)1

10

12 -o 12.5

5.1 -webkit

On border-image

(Yes)

29 (29)

(Yes)

(Yes)

(Yes)

On any other property that accept <image>

No support

(Yes)

(Yes)

(Yes)

(Yes)

Interpolation hints (a percent without a color)

40

36 (36)

?

?

?

Feature

Android

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Basic support (on background and background-image)

4.4

46.0 (46)

10

12.1

7.1

On border-image

29.0 (29)

(Yes)

(Yes)

(Yes)

(Yes)

On any other property that accept <image>

No support

(Yes)

(Yes)

(Yes)

(Yes)

CSS

层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS目录

1.动画和转换 | Animations & Transitions
2.背景和边框 | Backgrounds & Borders
3.基本框模型 | Basic Box Model
4.基本用户界面 | Basic User Interface
5.框对齐 | Box Alignment
6. 级联和继承 | Cascading & Inheritance
7.颜色 | Color
8. 合成与混合 | Compositing & Blending
9.条件和规则 | Conditional Rules
10.计数器样式 | Counter Styles
11.设备适配 | Device Adaptation
12.扩展 | Extensions
13.滤镜效果 | Filter Effects
14.灵活的框布局 | Flexible Box Layout
15.字体 | Fonts
16.片段模块 | Fragmentation
17.全屏 API | Fullscreen API
18. 生成内容 | Generated Content
19.网格布局 | Grid Layout
20.图像值 | Image Values
21.初始线格局 | Inline Layout
22.列表和计数器 | Lists & Counters
23.逻辑属性 | Logical Properties
24.面具 | Masking
25.媒体查询 | Media Queries
26.杂项 | Miscellaneous
27.Miscellaneous Level 1
28.Miscellaneous Level 2
29.运动路径 | Motion Path
30. 多列布局 | Multi-column Layout
31.命名空间 | Namespaces
32.项目模型 | Object Model View
33.网页媒体 | Paged Media
34.定位布局 | Positioned Layout
35.伪元素 | Pseudo-
36.节奏大小 | Rhythmic Sizing
37. Ruby布局 | Ruby Layout
38.可缩放矢量图形 | Scalable Vector Graphics
39.滚动快照 | Scroll Snap
40.选择 | Selectors
41.形状 | Shapes
42.文本 | Text
43.文字装饰 | Text Decoration
44.变换 | Transforms
45.值和单位 | Values & Units
46.变量 | Variables
47.写入模型 | Writing Modes
48.CSS 教程
49.CSS 创建
50.CSS Id 和 Class选择器
51.CSS 简介
52.CSS 盒子模型
53.CSS Table(表格)
54.CSS 列表样式(ul)
55.CSS 链接(link)
56.CSS Fonts(字体)
57.CSS Text(文本)
58.CSS Backgrounds(背景)
59.CSS Display(显示) 与 Visibility(可见性)
60.CSS 尺寸 (Dimension)
61.CSS 分组和嵌套
62.CSS 轮廓(outline)属性
63.CSS Border(边框)
64.CSS 图像透明/不透明
65.CSS 导航栏
66.CSS 伪元素
67.CSS 伪类
68.CSS Float(浮动)
69.CSS Position(定位)
70.CSS 总结
71.CSS 属性选择器
72.CSS 媒体类型
73.CSS 图像拼合技术
74.CSS 实例
75.CSS 组合选择符
76.响应式 Web 设计 – 框架
77.响应式 Web 设计 – 视频(Video)
78.CSS 提示工具(Tooltip)
79.CSS 布局 Overflow
80.CSS 计数器
81.CSS 表单