《CSS3实战》笔记--渐变设计（一)(css实战手册)

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

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

基于CSS的渐变与图片渐变相比，最大的优点是便于修改，同时支持无级缩放，过渡更加自然。目前，实现CSS渐变的只有基于Webkit和Gecko引擎的浏览器，基于Presto引擎的Opera浏览器暂时不支持渐变，基于Trident的IE虽然可以通过滤镜的方式实现，但并不提倡。

Webkit引擎（Safari 4及以上版本）的CSS渐变设计

基本语法：

参数说明：

<type>:定义渐变类型，包括线性渐变（linear）和径向渐变（radial）。

<point>:定义渐变起始点和结束点坐标，即开始应用渐变的x轴和y轴坐标，以及结束渐变的坐标。该参数支持数值，百分比和关键字，如（0，0）或者（left，top）等。关键字包括top，bottom，left和right。

<radius>:当定义径向渐变时，用来设置径向渐变的长度，该参数为一个数值。

<stop>:定义渐变色和步长。包括三个类型值，即开始的颜色，使用from （color value）函数定义；结束的颜色，使用to（color value）函数定义：颜色步长，使用color-stop（value，color value）定义。color-stop（）包含两个参数值，第一个参数值为一个数值或者百分比值，取值范围为0~1.0（或者0%~%），第二个参数值表示任意颜色值。

直线渐变基本用法：

演示效果：

演示效果：

演示效果：

演示效果：

小结：color-stop（）函数包含两个参数值，第一个参数值指定角标位置，第二个参数指定色标颜色。一个渐变可以包含多个色标，位置值为0~1之间的小数，或者0~%之间的百分数，指定色标的位置比例。

径向渐变的基本用法

效果显示：

演示效果：

演示效果：

演示效果：

演示效果：

演示效果：

演示效果：

演示效果：

渐变应用定义渐变效果的边框

代码：

演示效果：

定义填充内容效果

代码：

显示效果：

定义列表图标

演示效果：

《CSS3实战》笔记--渐变设计（二) Gecko引擎的CSS渐变设计直线渐变基本语法-moz-linear-gradient([point||angle,]stop,stop[,stop]*)参数说明：point:定义渐变起始点，取值包含数值，百分比，也可以使用

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

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