CSS3 渐变（Gradients）之CSS3 径向渐变

下面是关于“CSS3 渐变（Gradients）之CSS3 径向渐变”的完整讲解。

简介

CSS径向渐变是CSS3引入的一种新特性，它可以用来创建从一个点向外扩散的颜色渐变效果。径向渐变可以使用在HTML元素的背景上，可以水平、垂直或者是斜向绘制，也可以从多个颜色之间产生平滑过渡效果。

在CSS3径向渐变中，我们能设置两个以上的颜色和它们之间的位置，让它们产生平滑的过渡效果。CSS3径向渐变可以让我们用起来比较容易，因为它使用了一些比较简单的语法。

语法

CSS3径向渐变语法如下：

background: radial-gradient(shape, start-color, ..., last-color);

其中，shape可以是circle或者ellipse，表示渐变的形状类型，start-color和last-color表示起始颜色和结束颜色，它们之间可以用逗号分隔并设置多个颜色，表示用这些颜色来实现渐变效果。同时，我们还可以使用关键词at后面跟着位置信息来表示渐变的中心点位置，如：

background: radial-gradient(shape, start-color, ..., last-color) at center;

示例

下面我们通过两个实例来演示CSS3径向渐变的用法。

实例1：简单的径向渐变

我们可以在一个元素的背景上设置一个简单的径向渐变。比如，我们要设置一个从红色到蓝色的径向渐变，可以这样写：

background: radial-gradient(circle, red, blue);

这样设置之后，我们会发现该元素的背景出现了一个从红色到蓝色的圆形渐变。

实例2：带有位置信息的径向渐变

我们可以使用关键词at和位置信息来定义渐变的中心点位置。比如，我们要将一个从红色到蓝色的圆形径向渐变放在一个正方形重心位置，可以这样写：

background: radial-gradient(circle, red, blue) at center;

这样设置之后，我们会发现该元素的背景出现了一个从红色到蓝色的圆形渐变，并且渐变的中心点在正方形的重心位置。

结语

通过这篇攻略，我们介绍了CSS3径向渐变的语法和两个示例。希望能对大家的学习和工作有所帮助。