《CSS3实战》笔记--渐变设计（二)(css教程笔记)

推荐整理分享《CSS3实战》笔记--渐变设计（二)(css教程笔记)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:css教程笔记,css3基础知识,css教程笔记,css教程笔记,css实战训练,css3实战手册第3版,css3实战手册第3版,css3基础知识,内容如对您有帮助，希望把文章链接给更多的朋友！

Gecko引擎的CSS渐变设计直线渐变基本语法

参数说明：

<point>:定义渐变起始点，取值包含数值，百分比，也可以使用关键字，其中left，center 和 right 关键字定义 x 轴坐标，top，center 和 bottom 关键字定义 y 轴坐标。当指定一个值时，另一个值默认为 center 。

<angle>:定义直线渐变的角度。单位包括deg，grad（梯度，度 = grad），rad （弧度，一圈等于2*PI rad）。

<stop>：定义步长，用法与Webkit引擎的color-stop()函数相似，但是该参数不需要调用函数，直接传递函数即可。其中第一个参数设置颜色，可以为任何合法的颜色值，第二个值设置颜色的位置，取值为百分比（0~%）或者数值，也可以省略步长设置。

直线渐变的基本用法

演示效果：

演示效果：

演示效果：

演示效果：

演示效果：

小结：当指定角度时，是沿水平线按逆时针旋转定位的。因此，设置0deg,将产生从左向右的水平渐变，而设置度，将创建一个从底部到顶部的渐变。

演示效果：

演示效果：

径向渐变的基本语法

该函数的参数说明：

<point>:定义渐变起始点，取值包含数值，百分比，也可以使用关键字，其中left，center 和 right关键字定义x 轴坐标，top，center 和 bottom 关键字定义 y 轴坐标。当指定一个值时，则另一个值默认为center。

<angle>:定义直线渐变的角度。单位包括deg，grad（梯度，度 = grad），rad （弧度，一圈等于2*PI rad）。

<stop>：定义步长，用法与Webkit引擎的color-stop()函数相似，但是该参数不需要调用函数，直接传递函数即可。其中第一个参数设置颜色，可以为任何合法的颜色值，第二个值设置颜色的位置，取值为百分比（0~%）或者数值，也可以省略步长设置。

:定义圆半径，或者椭圆的轴长度n

径向渐变的基本语法

演示效果：

演示效果：

显示效果：

演示效果：

演示效果：

小结： size参数包含多个关键字，closest-side,closest-corner,farthest-side,farthest-corner,contain 和 cover。使用这些关键字可以定义径向渐变的大小。

另外，Gecko引擎还定义了-moz-repeating-linear-gradient 和-moz-repeating-radial-gradient 两个属性，用来定义重复直线渐变和重复径向渐变。

演示效果：

演示效果：

渐变的应用

演示效果：

《CSS3实战》笔记--渐变设计（三) IE浏览器引擎的CSS渐变实现方法IE并不支持CSS渐变，但是提供了渐变滤镜，可以用来实现简单的渐变效果。基本语法该参数的参数说明如下：enabled:设置

CSS3实现动态翻牌效果 仿百度贴吧3D翻牌一次动画特效 今天分享一个CSS3制作的翻牌效果，效果如下图所示，所过把把这个效果应用于相册肯定会很炫的。呵呵，超酷啊。一、HTML代码：因为是CSS3实现，所以

html5手机触屏touch事件介绍 HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日