CSS 函数实例
以下实例演示了径向渐变 - 颜色结点均匀分布:
#grad {
background-image: radial-gradient(red, green, blue);
}
定义与用法
radial-gradient() 函数用径向渐变创建 "图像"。
径向渐变由中心点定义。
为了创建径向渐变你必须设置两个终止色。
径向渐变实例
支持版本：CSS3
浏览器支持
表格中的数字表示支持该函数的第一个浏览器版本号。
"webkit" 或 "moz" 或 "o" 指定的数字为支持该函数的第一个版本号前缀。
| 函数 | |||||
|---|---|---|---|---|---|
| radial-gradient() | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
CSS 语法
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
| 值 | 描述 |
|---|---|
| shape | 确定圆的类型:
|
| size | 定义渐变的大小，可能值：
|
| position | 定义渐变的位置。可能值：
|
| start-color, ..., last-color | 用于指定渐变的起止颜色。 |
更多实例
实例
颜色结点不均匀分布:
#grad {
background-image: radial-gradient(red 5%, green 15%, blue 60%);
}
实例
圆形径向渐变:
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
实例
不同尺寸大小关键字的使用:
#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}
CSS 教程: CSS3 渐变
其他扩展