位置: 编程技术 - 正文
《CSS3实战》笔记--渐变设计（一)(css实战手册)
编辑：rootadmin推荐整理分享《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实现，所以
标签: css实战手册
本文链接地址:https://www.jiuchutong.com/biancheng/368711.html 转载请保留说明！上一篇：CSS 使用Sprites技术实现圆角效果(css spirit)
下一篇：《CSS3实战》笔记--渐变设计（二)(css教程笔记)
