HTML5&CSS3网页制作：CSS3径向渐变.pptx

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