在CSS3之前的版本中，如果需要添加渐变效果，通常需要设置背景图片来实现。 不过CSS3中减少了渐变属性，通过渐变属性可以轻松实现渐变效果。 CSS3的渐变属性主要有线性渐变、径向渐变和重复渐变，下面详细介绍。
1. 线性渐变
在线性渐变过程中，起始颜色将沿着直线顺序过渡到结束颜色。 使用“background-image:linear-gradient(参数值);” CSS3中的style可以实现线性渐变效果，其基本句式如下。
背景图像：线性渐变（渐变角度，颜色值1，颜色值2...，颜色值n）；
前面的句子格式中，使用了Linear-Gradient来定义渐变形式为线性渐变css3渐变三角形，中括号用于设置渐变角度和颜色值。 具体解释如下。
(1) 倾斜角
渐变角度是指水平线与渐变线之间的倾斜角度，可以是以deg为单位的角度值，也可以是“to”加上“左”、“右”、“上”、“下”等关键字。 使用角度设置渐变起点时，0deg 对应“到顶部”，90deg 对应“到右”，180deg 对应“到下”，270deg 对应“到左”。 整个过程是以底部为起点顺时针旋转。 详细信息如图1所示。
图1 渐变角度图
当不设置渐变角度时，默认为“180deg”，相当于“tobottom”。
(2)色值
颜色值用于设置渐变颜色，其中“颜色值1”表示起始颜色，“颜色值n”表示结束颜色。 起始颜色和结束颜色之间可以添加多个颜色值，用“,”分隔。 示例代码如下：
线性渐变 p{ width:200px; height:200px; background-image:linear-gradient(30deg,#0f0,#00F); }
示例代码运行效果如图2所示。
图2 线性渐变1
图2中实现了从红色到紫色的线性渐变。值得一提的是，还可以在每个颜色值旁边写一个比率值来标识颜色渐变的位置，例如下面的示例代码：
background-image:linear-gradient(30deg,#0f0 50%,#00F 80%);
在前面的示例代码中，可以看到红色（#0f0）从50%位置开始渐变到80%位置处的黄色（#00f）并结束渐变。 可以与Photoshop中的渐变色块进行比较，如图3所示。
图3 定义渐变颜色位置
示例代码对应的疗效如图4所示。
图4 线性渐变2
2. 径向渐变
径向渐变也是网页中常用的渐变。 在径向渐变过程中，起始颜色将从中心点开始，按照椭圆形或正方形的形状扩展。 使用“background-image:radial-gradient(参数值);” CSS3中的style可以实现放射状渐变效果css3渐变三角形，其基本句式如下。
background-image:radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2...,颜色值n);
在前面的句子格式中，使用radial-gradient来定义渐变的形式为径向渐变。 括号内的参数值用于设置渐变形状、圆心位置和颜色值。 各个参数的具体介绍如下。
(1) 渐变形状
渐变形状用于定义径向渐变的形状。 它的值可以是定义水平和垂直直径的像素值或比率，也可以是相应的关键字。 关键字主要包括“circle”和“ellipse”两个值，解释如下。
● 像素值/百分比：用于定义形状的水平和垂直直径。 例如，“80px 50px”表示水平直径为80px、垂直直径为50px的椭圆。
● 圆：指定正方形的径向渐变。
● ellipse：指定椭圆的径向渐变。
(2) 圆心位置
中心位置用于确定元素渐变的中心位置，使用“at”加关键字或参数值来定义径向渐变的中心位置。 该属性值类似于CSS中的background-position属性值，如果省略，则默认为“center”。 属性值主要包括以下几种：
● 像素值/百分比：用于定义圆心的横纵坐标，可以为负值。
● left：设置右侧为径向渐变圆中心的横坐标值。
● 中心：设置中心为径向渐变圆中心的横坐标值或纵坐标。
● 右：设置右侧为径向渐变圆中心的横坐标值。
● top：将bottom 设置为径向渐变圆中心的纵坐标值。
● 底部：将顶部设置为径向渐变圆中心的纵坐标值。
(3) 色值
“颜色值1”代表起始颜色，“颜色值n”代表结束颜色。 起始颜色和结束颜色之间可以添加多个颜色值，每个颜色值之间用“,”分隔。 示例代码如下：
径向渐变 p{ width:200px; height:200px; border-radius:50%; /*设置圆角边框*/ background-image:radial-gradient(ellipse at center,#0f0,#030); /*设置径向渐变*/ }
里面的反例中，为p标签定义了一个椭圆形的渐变形状，径向渐变位置在容器的中心点，径向渐变范围从绿色（#0f0）到深红色（#030） ）； 同时，使用“border-radius”属性将容器的边框设置为圆角。 示例代码运行效果如图5所示。
图5 径向渐变
在图 5 中，球体实现了从红色到深红色的径向渐变。 值得一提的是，与“线性渐变”类似，也可以在“径向渐变”的颜色值前面写入一个比例值来设置渐变的位置。
3.重复渐变
在网页设计中，经常会遇到将渐变图案重复应用到背景上，然后需要使用重复渐变的情况。 重复梯度包括重复线性梯度和重复径向梯度，如下所述。
(1) 重复线性渐变
在CSS3中，可以通过“background-image:repeating-linear-gradient(参数值);”来实现重复线性渐变的效果。 风格。 基本句子格式如下。
background-image:repeating-linear-gradient(渐变角度,颜色值1,颜色值2...,颜色值n);
里面的语句格式中，使用“repeating-linear-gradient（参数值）”来定义梯度形式为重复线性梯度。 括号内的参数值与线性渐变相同，分别用于定义渐变角度和颜色值。 颜色值也可以使用比率来定义位置。
(2) 重复径向渐变
在CSS3中，可以通过“background-image:repeating-radial-gradient(参数值);”来实现重复线性渐变的效果。 风格。 基本句子格式如下。
background-image:repeating-radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2...,颜色值n);
在前面的句子格式中，“repeating-radial-gradient（参数值）”用于定义渐变形式为重复径向渐变。 括号内的参数值与径向渐变相同，分别用于定义渐变形状和圆心。 位置和颜色值。
