CSS渐变背景

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

使用CSS3的背景渐变 -webkit-gradient，用一个背景渐变的DIV代替图片。

要实现盒子背景颜色的渐变效果，常见的一般有三种，线性渐变 （linear gradient）、重复线性渐变（repeating-linear-gradient）、径向渐变（radial-gradient）

一、线性渐变

通过linear-gradient来这样定义一个线性渐变

background-image: linear-gradient( 方向/角度 , 颜色1，颜色2，颜色3....);

从上到下

例如：

background-image: linear-gradient(#ff0000,#f794ce, #03fbe2);

从下到上

例如：

background-image: linear-gradient(#03fbe2,#f794ce, #ff0000);

从左到右

例如：

background-image: linear-gradient(to right, #03fbe2,#f794ce, #ff0000);

从右到左

例如：

background-image:linear-gradient(to left,#03fbe2,#f794ce,#ff0000);

从左上到右下

可以使用多个关键词，例如to bottom right，表示从左上到右下

background-image: linear-gradient(to bottom right, #03fbe2,#f794ce, #ff0000);

从右上到左下

例如：

background-image: linear-gradient(to bottom left, #03fbe2,#f794ce, #ff0000);

使用角度来定义方向

除了使用关键词to + 方向名词外，我们还可以使用角度来任意定一个方向

一个平面上的角度只有360度，也就是一个圆，使用角度来定义任意一个方向，值 0deg 等于向上（to top），值 90deg 等于向右（to right），值 180deg 等于向下（to bottom）。

例如：

background-image: linear-gradient(45deg, #03fbe2,#f794ce, #ff0000);

表示从起点从225度到45度结束的渐变

平铺的线性渐变

当然，颜色也可以用rgb模式，这样就可以使用透明度了！

background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

二、径向渐变

1.径向渐变就是从中心开始向四周扩散。

我们通过 radial-gradient();来定义一个径向的渐变。

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

position:
				left right center
				top center bottom
				X、Y轴

			shape: 
				circle 圆形
				elipse 椭圆 默认值

			size:
				closest-side 渐变到最近边
				farthest-side 渐变到最远边
				closest-corner 渐变到最近角
				farthest-corner 渐变到最远角

---

总结

例如：以上就是今天要讲的内容，本文仅仅简单介绍了CSS渐变背景的使用方法。