CSS3渐变属性是CSS3的一项新特性，用于在元素的背景上创建平滑的渐变效果。通过使用渐变属性，可以为元素的背景添加渐变色或渐变图片，使得页面的设计更加丰富多样。

CSS3渐变属性包括线性渐变（linear-gradient）和径向渐变（radial-gradient）两种类型。

线性渐变是指在元素背景上通过线性方式渐变颜色。通过设置渐变的起点和终点，可以定义渐变的方向和长度。线性渐变可以设置多个颜色和位置，也可以设置角度或方向。

径向渐变是指在元素背景上通过圆形或椭圆形的方式渐变颜色。通过设置渐变的起点和终点（中心点和半径），可以定义渐变的形状和大小。径向渐变可以设置多个颜色和位置。

使用渐变属性，可以创建各种各样的渐变效果，例如渐变背景色、渐变边框、渐变文字等。下面详细介绍CSS3渐变属性的用法和示例。

1. 线性渐变（linear-gradient）

线性渐变（linear-gradient）是通过线性方式渐变颜色的属性。可以使用关键字（to left、to right、to top、to bottom）或角度（deg、rad、turn）来指定渐变的方向。

语法：background: linear-gradient(direction

color-stop1

color-stop2

...);

示例：

```css

.background {

background: linear-gradient(to left

red

orange

yellow

green);

}

```

上述代码表示在元素的背景上创建一个从左到右的红橙黄绿的线性渐变。

2. 径向渐变（radial-gradient）

径向渐变（radial-gradient）是通过圆形或椭圆形方式渐变颜色的属性。可以使用关键字（closest-side、closest-corner、farthest-side、farthest-corner）或位置（具体坐标、百分比）来确定渐变的形状和大小。

语法：background: radial-gradient(shape size at position

start-color

...

last-color);

示例：

```css

.background {

background: radial-gradient(circle closest-side at 50% 50%

red

blue);

}

```

上述代码表示在元素的背景上创建一个以50% 50%为中心的圆形径向渐变，渐变颜色从红色到蓝色。

除了使用渐变属性的基本语法，还可以通过关键字repeating-linear-gradient和repeating-radial-gradient来创建重复的渐变效果。

示例：

```css

.background {

background: repeating-linear-gradient(red

orange 20px

yellow 40px);

}

```

上述代码表示在元素的背景上创建一个重复的红橙黄的线性渐变，每隔20像素变化一次颜色。

以上是CSS3渐变属性的基本用法和示例，通过组合不同的颜色和位置，可以创建各种各样的渐变效果。渐变属性提供了更灵活和丰富的背景样式选择，可以让页面设计更加生动和有趣。