在CSS3之前,如果需要添加界面效果,通常要设置背景图像来实现。在CSS3中增加了渐变属性,通过渐变属性,也可以轻松的实现界面效果。CSS3的界面效果属性主要包括线性渐变、径向渐变。
CSS3设置线性渐变
在线性渐变过程中,起始颜色会沿着一条直线按顺序过渡到结束颜色。运用CSS3中的“background-image:linear-gradient(参数值)”样式可以实现线性渐变效果。它的基本语法格式为:
其中linear-gradient用于定义渐变方式为线性渐变,括号内用于设定渐变角度和颜色值。
渐变角度指水平线和渐变线之间的夹角,可以是以deg为单位的角度数值或关键词(to+left top right bottom)。
颜色值用于设置渐变颜色,其中“颜色值1”便是起始颜色,“颜色值n”表示结束颜色,起始颜色和结束颜色之间可以添加多个颜色值,各颜色值之间用英文逗号“,”隔开
CSS3设置径向渐变
径向渐变是网页中另一种常用的渐变,在径向渐变过程中,起始颜色会从一个中心点开始,依据椭圆或圆形形状进行扩张渐变。运用CSS3中的“background-image:radial-gradient(参数值);”样式可以实现径向渐变。它的基本语法格式为:
其中radial-gradient用于定义渐变的方向为径向渐变,括号内的参数值用于设定渐变形状、圆心位置和颜色值。
渐变形状用来定义径向渐变的形状,其取值既可以是定义水平和垂直半径的像素值或百分比,也可以是相应的关键字。
圆心位置用于确定元素渐变的中心位置,使用“at”加上关键词或参数值来定义径向渐变的中心位置。
“颜色值1”表示起始颜色,“颜色值n”表示结束颜色,起始颜色和结束颜色之间可以添加索哥颜色值,各颜色之间用英文逗号“,”隔开。
CSS3设置重复渐变
在网页设计中,经常会遇到已在一个背景上重复应用渐变模式的情况,这时就需要使用重复渐变。重复渐变包括重复线性渐变和重复径向渐变。
在CSS3中通过“background-image:repeating-linear-gradient (参数值);”样式可以实现重复线性渐变的效果。它的基本语法格式为:
在CSS3只能够通过“background-image:repeating-radial-gradient(参数值);”样式可以实现重复径向渐变的效果。它的基本语法格式为:
综合应用: