CSS radial-gradient() 函数
定义与用法
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 | 用于指定渐变的起止颜色。 |
更多实例
实例
不同尺寸大小关键字的使用:
#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 渐变
点我分享笔记