CSS3线性渐变
CSS3渐变属性
01
CSS3渐变属性
在CSS3之前如果需要添加渐变效果,通常要设置背景图像来实现。而CSS3中增加了渐变属性,通过渐变属性可以轻松实现渐变效果。
CSS3渐变属性
css3中定义了两种渐变类型:线性渐变和径向渐变。线性渐变是指两个或者两个以上颜色之间显示平稳的过渡的动画效果,我们一般在css3中使用新增的gradients属性实现这个效果,我们根据渐变的方向分为从上至下、从右至左和对角渐变,其中默认的方向是从上向下渐变。
描述
线性渐变
02
线性渐变
描述
在线性渐变过程中,起始颜色会沿着一条直线按顺序过渡到结束颜色。
语法格式
background-image:linear-gradient(渐变角度,颜色值1,颜色值2...,颜色值n);
说明
linear-gradient用于定义渐变方式为线性渐变,括号内用于设定渐变角度和颜色值。
线性渐变
渐变角度指水平线和渐变线之间的夹角,可以是以deg为单位的角度数值或关键词。
渐变角度
颜色值用于设置渐变颜色,其中“颜色值1”表示起始颜色,“颜色值n”表示结束颜色,起始颜色和结束颜色之间可以添加