在css之前如果想要加入渐变效果,通常要通过设置背景图像来实现。css3中加入了渐变属性,通过渐变属性可以很轻松的实现渐变效果。css的渐变效果主要包括线性渐变和径向渐变。
线性渐变:起始颜色沿着一条直线过渡,在css3中利用“background-image:linear-gradient(参数值);”可以实现渐变效果,基本格式如下:
background-image:linear-gradient (渐变角度,颜色值1,颜色值2,… …颜色值n);
渐变角度是指水平线和渐变线之间的夹角,可以是以deg为单位的角度值或“to”加“left”“right”“top”和“bottom”等关键词。
颜色值:用于设置渐变颜色,“颜色值1”为起始颜色,“颜色值n”为结束颜色。
径向渐变:在径向渐变中起始颜色会从一个中心点开始向外扩张。基本格式如下:
background-image:radial-gradient(渐变形状圆心位置,颜色值1,颜色值2,… …颜色值n);
重复线性渐变:基本语法如下:
background-image:repeating-linear-gradient(渐变角度,颜色值1,颜色值2,… …颜色值n);
重复径向渐变:基本语法如下:
background-image:repeating-radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2,… …颜色值n);