CSS3径向渐变
径向渐变
01
径向渐变
CSS3径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化,而是从一个起点朝所有方向混合。
background-image:radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2...,颜色值n);
描述
语法格式
说明
radial-gradient用于定义渐变的方式为径向渐变,括号内的参数值用于设定渐变形状、圆心位置和颜色值。
径向渐变
渐变形状用来定义径向渐变的形状,其取值即可以是定义水平和垂直半径的像素值或百分比,也可以是相应的关键词。
渐变形状
圆心位置用于确定元素渐变的中心位置,使用“at”加上关键词或参数值来定义径向渐变的中心位置。
圆心位置
“颜色值1”表示起始颜色,“颜色值n”表示结束颜色,起始颜色和结束颜色之间可以添加多个颜色值,各颜色值之间用“,”隔开。
颜色值
径向渐变
background: radial-gradient(30% 70%, farthest-side, blue, red)
示例:设置红色,蓝色的径向渐变
总结
02
总结
掌握径向渐变书写形式
了解什么是CSS径向渐变
THA