CSS 参考手册教程
CSS radial-gradient() 函数
CSS radial-gradient() 函数
CSS radial-gradient() 函数
实例
以下实例演示了径向渐变 - 颜色结点均匀分布:
#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 渐变
| CSS radial-gradient() 函数 |
|---|
CSS 参考手册
CSS 参考手册提供了完整的 CSS 属性列表，每个属性都配有语法说明及实例演示，另外还讲解了 CSS 选择器、颜色值及浏览器支持等相关内容。
加载中,请稍侯......