文章摘要
这篇文章介绍了Gecko引擎中的CSS渐变设计，包括直线渐变和径向渐变的语法和用法。
1. **直线渐变**
- 使用`-webkit-linear-gradient`语法实现。
- 参数包括渐变起始点（数值、百分比或关键字left、right、top、bottom）、渐变角度（deg、grad、rad）、步长（类似于`color-stop`函数）和渐变终点。
- 0deg时渐变从左向右，90度时从底部到顶部。
2. **径向渐变**
- 使用`-webkit-radial-gradient`语法实现。
- 参数包括渐变起始点、渐变角度、步长、渐变终点和圆半径/椭圆轴长度。
- `size`参数可设置渐变大小，支持`closest-side`、`closest-corner`、`farthest-side`、`farthest-corner`、`contain`和`cover`关键字。
3. **渐变应用**
- 展示了如何在不同场景中应用渐变，包括背景、文本和形状等。
- 提到`-moz-repeating-linear-gradient`和`-moz-repeating-radial-gradient`属性，用于重复渐变。
总结：文章详细讲解了直线渐变和径向渐变的语法、参数和应用示例，适合学习CSS渐变设计的开发者。
Gecko引擎的CSS渐变设计直线渐变基本语法
参数说明：
:定义渐变起始点，取值包含数值，百分比，也可以使用关键字，其中left，center 和 right 关键字定义 x 轴坐标，top，center 和 bottom 关键字定义 y 轴坐标。当指定一个值时，另一个值默认为 center 。
:定义直线渐变的角度。单位包括deg，grad（梯度，90度=100grad），rad （弧度，一圈等于2*PI rad）。
：定义步长，用法与Webkit引擎的color-stop()函数相似，但是该参数不需要调用函数，直接传递函数即可。其中第一个参数设置颜色，可以为任何合法的颜色值，第二个值设置颜色的位置，取值为百分比（0~100%）或者数值，也可以省略步长设置。
直线渐变的基本用法
演示效果：
演示效果：
演示效果：
演示效果：
演示效果：
小结：当指定角度时，是沿水平线按逆时针旋转定位的。因此，设置0deg,将产生从左向右的水平渐变，而设置90度，将创建一个从底部到顶部的渐变。
演示效果：
演示效果：
径向渐变的基本语法
该函数的参数说明：
:定义渐变起始点，取值包含数值，百分比，也可以使用关键字，其中left，center 和 right关键字定义x 轴坐标，top，center 和 bottom 关键字定义 y 轴坐标。当指定一个值时，则另一个值默认为center。
:定义直线渐变的角度。单位包括deg，grad（梯度，90度=100grad），rad （弧度，一圈等于2*PI rad）。
：定义步长，用法与Webkit引擎的color-stop()函数相似，但是该参数不需要调用函数，直接传递函数即可。其中第一个参数设置颜色，可以为任何合法的颜色值，第二个值设置颜色的位置，取值为百分比（0~100%）或者数值，也可以省略步长设置。
:定义圆半径，或者椭圆的轴长度n
径向渐变的基本语法
演示效果：
演示效果：
显示效果：
演示效果：
演示效果：
小结：
size参数包含多个关键字，closest-side,closest-corner,farthest-side,farthest-corner,contain 和 cover。使用这些关键字可以定义径向渐变的大小。
另外，Gecko引擎还定义了-moz-repeating-linear-gradient 和-moz-repeating-radial-gradient 两个属性，用来定义重复直线渐变和重复径向渐变。
演示效果：
演示效果：
渐变的应用
演示效果：
您可能感兴趣的文章:使用 stylelint检查CSS_StyleLint《CSS3实战》笔记–渐变设计（一)《CSS3实战》笔记–渐变设计（三)
© 版权声明
文章版权归作者所有，未经允许请勿转载。
