CSS3 渐变学习笔记

CSS3 渐变是一种可以创建颜色过渡的方法，能够制作出很多漂亮的效果。本文将介绍两种常见的 CSS3 渐变：线性渐变和径向渐变。

线性渐变

线性渐变会在两个给定点之间创建一个颜色过渡。以下是一个简单的例子：

cssCopy Code
background: linear-gradient(red, yellow);

这行代码会在背景中创建一个从红色到黄色的线性渐变。也可以添加多个颜色值来创建更加细致的渐变。例如：

cssCopy Code
background: linear-gradient(red, orange, yellow);

这段代码会在背景中创建一个从红色到橙色再到黄色的线性渐变。

我们还可以设置渐变的方向。默认情况下，渐变会从上到下，但我们可以通过关键词或角度来指定渐变的方向。以下是几个例子：

cssCopy Code
/* 从左到右 */
background: linear-gradient(to right, red, yellow);

/* 从右上到左下 */
background: linear-gradient(to bottom left, red, yellow);

/* 从上到下（等同于不使用关键词） */
background: linear-gradient(0deg, red, yellow);

/* 135 度方向 */
background: linear-gradient(135deg, red, yellow);

径向渐变

径向渐变是一种从一个中心点向外扩散的渐变。以下是一个简单例子：

cssCopy Code
background: radial-gradient(red, yellow);

这段代码会在背景中创建一个从红色到黄色的径向渐变。

和线性渐变一样，我们可以添加多个颜色值来创建更加细致的渐变。还可以设置中心点的位置和半径。以下是几个例子：

cssCopy Code
/* 圆形渐变 */
background: radial-gradient(circle, red, yellow);

/* 椭圆渐变 */
background: radial-gradient(ellipse, red, yellow);

/* 指定中心点和半径 */
background: radial-gradient(circle at 60% 40%, red, yellow);

以上就是 CSS3 渐变的介绍和示例。通过合理使用 CSS3 渐变，我们可以创造出许多美丽的视觉效果。