background 渐变_背景颜色渐变

在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);