详解CSS3中使用gradient实现渐变效果的方法

CSS3中的gradient可以实现各种各样的渐变效果，本文将介绍它们的不同类型和应用。

线性渐变（Linear Gradient）

线性渐变可创建沿着一条直线的渐变。下面是一个创建从上至下渐变的例子：

background: linear-gradient(to bottom, #ffffff, #000000);

这段代码表示将从上至下创建一个渐变，从白色渐变至黑色。

同样，渐变也可以从左至右、从右上角到左下角、从上中线往四周扩散。下面是更多的线性渐变的例子：

/* 从左至右 */
background: linear-gradient(to right, #ffffff, #000000);

/* 从右上角到左下角 */
background: linear-gradient(to bottom right, #ffffff, #000000);

/* 从上中线往四周扩散 */
background: linear-gradient(circle at top center, #ffffff, #000000);

径向渐变（Radial Gradient）

径向渐变从一个中心点向四周扩散，可创建圆形、椭圆形或以其他方式扭曲的形状。下面是一个创建圆形径向渐变的例子：

background: radial-gradient(circle, #ffffff, #000000);

这段代码表示将创建一个圆形的径向渐变，从中心点渐变从白色到黑色。

同样，渐变也可以是形状扭曲的。下面是更多的径向渐变的例子：

/* 椭圆形 */
background: radial-gradient(ellipse at center, #ffffff, #000000);

/* 以斜45度角的椭圆形 */
background: radial-gradient(ellipse at 50% 50%, #ffffff, #000000);

/* 以左上角为中心的椭圆形 */
background: radial-gradient(ellipse at top left, #ffffff, #000000);

/* 左上角到右下角呈对角线的椭圆形 */
background: radial-gradient(ellipse 30% 70% at top left, #ffffff, #000000);

除了以上两种基本的渐变类型外，CSS3中还有重复渐变和角向渐变等其他类型。通过这些方法，我们可以创建出各种各样的渐变效果，为页面增加更多层次和美感。

示例代码参考： https://codepen.io/lyfeyaj/pen/cFBik