在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(参数值);”样式可以实现重复径向渐变的效果。它的基本语法格式为：
综合应用：
