要用梯度实现在CSS3渐变效果的方法详解
本文主要介绍了实现渐变效果使用梯度在CSS3的方式，这是最基本的知识CSS3入门学习。你需要的朋友可以参考一下。CSS3渐变分为线性渐变（梯度）和径向渐变（径向渐变）。
线性梯度WebKit中的应用
CSS代码将内容复制到剪贴板。
（{ WebKit的线性梯度}，{，} | |，*） / /最新写作语法
第一个参数表示梯度（类型）的类型，它可以是线性（线性梯度）或径向（径向梯度）。
第二个参数和第三个参数分别是表示梯度起点和终点的一对值，这对值可以用坐标形式或键值表示，如左。
顶部（左上角）和左下角（左下角）。
第四和第五个参数分别是两个颜色停止函数，颜色停止函数接受两个参数，第一个是梯度的位置，0个是起点，0.5个是中间点，1个是终点，第二个颜色是点。
线性梯度在Mozilla中的应用
Grammar：
CSS代码将内容复制到剪贴板。
（{ -moz线性梯度}，{，} | |，*）
参数:
它有三个参数。第一个参数表示线性梯度的方向。顶部是从顶部到底部，左边是从左到右，如果定义为左。
顶部，从左上角到右下角，第二个和第三个参数分别是起始色和结束色。你也可以在它们之间插入更多的参数来表示各种颜色。
背景梯度实现CSS3
CSS代码将内容复制到剪贴板。
= {
| |
| }
1：线性梯度
在CSS3背景线性梯度可以使用线性梯度实现。
CSS代码将内容复制到剪贴板。
=线性梯度（{ { } } {，} |，+）= {左} { }放顶bottombottom | | | |
代码风格的书需要写成-moz线性梯度在FF浏览器和Chrome浏览器需要写成WebKit的线性梯度。
这里的颜色值也可以分为许多段，如
CSS代码将内容复制到剪贴板。
背景图像：线性梯度（顶部，# eff6fb，# d3e4f3 68%）；
CSS代码将内容复制到剪贴板。
背景图像：线性渐变（左，# FF0000，# ffa500 13%，# ffff00 26%，# 0000ff 39%，# 008000 52%，# 4b0082 65%，# ee82ee 78%）
显示效果：
关键字也在渐变方向中指定。
CSS代码将内容复制到剪贴板。
背景图像：线性渐变（左上、# eff6fb 10%，# d3e4f3 68%）；
uff1a效应
也可以指定渐变的方向。
CSS代码将内容复制到剪贴板。
背景图像：线性梯度（0度，# eff6fb 10%，# d3e4f3 68%）；
0度梯度开始左边的90度底，右边的180度，和270deg顶部。因此，我们可以考虑的角度逆时针顺序。
如：
透明度（透明度）：也支持透明梯度。这是非常有用的，例如，当堆叠多个背景。这里是两个背景的组合：一张图片，一个白色到透明的线性渐变。
二：径向梯度
径向梯度近似于线性梯度。
CSS代码将内容复制到剪贴板。
=径向渐变（{ { | | } {在}，{在}，|，} +）
1。颜色
颜色梯度的定义直接。背景：-moz径向渐变（红、黄、# 1e90ff）；
结果如下：
对指定位置的渐变色：背景：-moz径向渐变（红5%、黄25%、# 1e90ff 50%）；
效果是如果：
2。形状
起初，形状不同。
CSS代码将内容复制到剪贴板。
背景图像：-moz径向渐变（bottombottom左，圆，红，黄，# 1e90ff）；
背景图像：-moz径向渐变（bottombottom左，椭圆形，红色，黄色，# 1e90ff）；
结果如下：
3、尺寸（尺寸）的不同选项：尺寸（最近的边、最近的角、最远的边、最远的角、包含或覆盖）指向定义圆或椭圆大小的点。
三：重复梯度（重复梯度）
重复一个梯度，你可以使用-moz重复线性梯度和-moz重复径向渐变。
CSS代码将内容复制到剪贴板。
{。repeating_radial_gradient_example
背景：-moz重复径向渐变（黑色，黑色5px 5px，白色，白色10px）；}
{。repeating_linear_gradient_example
背景：-moz重复线性梯度（左上- 45度，红色，红5px 5px，白色，白色10px）；}