CSS radial-gradient()函数
-
定义和用法
radial-gradient()函数将径向渐变设置为背景图像。径向梯度由其中心定义。要创建径向渐变,必须至少定义两个色标。特征 说明 CSS版本 CSS3 -
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-, -webkit-,-moz-或-o-指定使用前缀的第一个版本。函数 IE/Edge Chrome FireFox Safari Opera 函数名称 radial-gradient() 10.026.010.0 -webkit-16.03.6 -moz-6.15.1 -webkit-12.111.1 -o- -
CSS语法
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
值 描述 shape 定义渐变的形状。 可能的值: - ellipse (默认)
- circle
size 定义渐变的大小。 可能的值: - farthest-corner (默认)
- closest-side
- closest-corner
- farthest-side
position 定义渐变的位置。 默认是“center” start-color, ..., last-color 颜色停止是您想要渲染平滑过渡的颜色。 该值由颜色值,后跟可选的停止位置(0%和100%之间的百分比或沿梯度轴的长度)组成。 -
实例
具有均匀间隔颜色的径向渐变停止:
尝试一下#grad { background-image: radial-gradient(red, green, blue); }
具有不同大小关键字的径向渐变:
尝试一下#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); }