CSS样式教程_实现网页编程无压力.ppt

1,css样式教学,主 讲：许磊 办学宗旨：以人为本，育技能人才 发展目标：以质量创教育品牌 校 规：以法制校，以德育人 校 训：小胜凭智，大胜靠德；认真做事，诚信做人 校 风：成人第一 ，学习第一，工作第一 教 风：严谨治学，和谐施教，悉心育人 学 风：勤学苦练，博采众长，一专多能 用人机制：重用能人，培养新人，消除闲人，淘汰庸人 创业原则：同心、同德、同向、同利、同乐 人才观念： 有德有才是正品，有德无才是次品 无德无才是废品，无德有才是毒品 工作作风：诚实守信、服从命令、忍受不公、尽善尽美、善始善终 善翔精神：艰苦创业的亮剑精神，合作包容的团队精神，锲而不舍的执着精神,2,第1章 css样式表,1.1 css带来的好处 1.2 认识css。 1.2.1 css样式的说明、规则及特征 1.2.2 css分类 1.2.3 css中常用的单位 1.2.4 在样式规则中添加注释 1.3 常用的样式属性及值 1.4 div标记及span标记 1.5 常用样式的属性及值。 1.6 讲解css布局的重点和难点浮动和定位。 1.7 介绍文字和图像的排版。 1.8 介绍超链接和导航相关的设置方法。,3,1.1 css带来的好处,改变浏览器的默认显示风格使站点对浏览者和浏览器更具亲和力，使整个站点保持视觉的一致性 页面内容和显示样式分离，只要建立定义样式的css文件，并且让所有的html文件都来使用css文件所定义的样式，如果要改变html文件中任意部分的显示风格时，只要把css文件打开，更改样式就可以了 重用样式表，不同的html文件可以使用同一个css样式文件 可以降低网站的流量费用，不同的html文件使用同一个css样式文件，只需下载一次css样式文件就可； 由于样式的重用及下载流量的减少可以使页面载入更快； css使站点可以更好地被搜索引擎找到； 不同的html文件可以使用同一个css样式文件，要想改变这些页面的显示方式，只改一个css样式文件就可以，所以方便网站维护，使设计师在修改设计时更有效率，而代价更低。,4,1.2 认识css样式,css cascading style sheet(层叠样式表)的缩写 # p font-family:黑体; font-size:20px; color:blue; text-align:center; line-height:20px; ,5,1.2.1样式说明、规则及特征,样式就是格式，对于网页来说，像网页显示的文字、图片、段落、列表等以什么样的方式显示出来。层叠就是指当html文件引用多个css样式时，如果css的定义发生冲突，浏览器将依据层次的先后顺序来应用样式，如果不考虑样式的优先级时，一般会遵循“最近优选原则”。 样式规则 样式表的每个规则都有两个主要部分：选择器（selector）和声明（declaration）。选择器决定哪些因素要受到影响，声明由一个或多个属性值对组成。 基本语法：selector属性:属性值;属性:属性值 语法说明： selector表示希望进行格式化的元素； 声明部分包括在选择器后的大括号中； 用“属性:属性值”描述要应用的格式化操作； 声明中的多个属性值对之间必须用分号隔开。,6,1.2.1样式说明、规则及特征(续),继承是css的一个主要特征，许多css属性不但影响选择符所定义的元素，而且会被这些元素的后代继承。例如一个body定义了字符的颜色，这个颜色也会应用到段落的文本中。,7,1.2.2 css样式表的分类,选择器不同 基本选择器 html标记 选择器 class 类选择器(.classname) id 选择器（#id号） 伪类选择器 设置超链接 a:link a:hover a:visited a:active 选择段元素的首字母或首行进行格式化 p:first-letter p:first-line 复合选择器 后代选择器 table h1.mycls 组合选择器 table, h1. mycls, p.specia ,8,1.2.2 css样式表的分类(续),定义的位置不同 行内样式# 内嵌样式 隐藏标记：避免了因浏览器不支持css而导致错误，加上这些标记后，不支持css的浏览器，会自动跳过此段内容，避免一些错误,9,1.2.2 css样式表的分类(续),外部样式 链接式：可以单独放到一个文件里，这个文件的扩展名是.css，在使用的时候通过在html页的head里 导入式：也可以通过import filename.css引用其它样式文件，句未一定要加分号。 行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常需要混合使用： 有关整个网站统一风格的样式代码，放置在独立的样式文件*.css 某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式 某个网页内，部分内容”与众不同“，采用行内样式,10,1.3 css样式表的使用优先级,对于某个html标记： 当有多种位置不同的样式时，如果规定的样式没有冲突，则叠加；如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外部样式表显示，否则就按html的默认样式显示； 当有多种选择器样式时，先使用html选择器样式，再使用类选择器样式，再使用id选择器样式，再使用style属性样式。,11,1.4 css样式表长用的单位,百分比单位也是一种常用的相对类型，通常的参考依据为元素的font-size属性.,12,1.5 在样式表中添加注释,在样式表表中添加注释有助于记住复杂的样式规则的作用，应用的范围等，便于进行维护和应用。例如，下面是一个添加注释的样例。 /*此标记应用在文档中*/ h1color:red;background:yellow; 注意：注释不能嵌套。,13,1.6 常用的样式属性及值,字符(font)格式 设置字族科font-family:“宋体”, “黑体”,”仿宋”; 设置字大小font-size:12px; 设置字风格font-style:normal|italic|oblique; 设置行高line-height:normal(值); 设置粗细font-weight:normal|bold|bolder|lighter|值; 设置变体font-variant:normal|small-caps;,14,1.6 常用的样式属性及值（续）,font属性是一种复合属性，可以同时对文字设置多个属性。包括字体族科、大小、风格、加粗及字体变体。 基本语法： font: font-style font-weight font-variant font-size/line-height font-family 语法说明： 如果要利用font属性，同时设置多个文字属性时，属性与属性之间必须利用空格隔开； 前三个属性次序不定或者省略，默认为normal； 大小和字体族科必须显式地指定，先设置大小，再设置字体族科，字体族科如果有多个，以逗号分割； 行高必须直接出现在字体大小后面，中间用斜杠分开，行高是可选的属性； font属性是继承的。,15,1.6 常用的样式属性及值（续）,设置文本(text)的样式 单词与单词之间的间距word-spacing:值 字母与字母之间的间距letter-spacing:值 垂直对齐vertical-align:值|baseline|sub|super|top|text-top|middle|bottom|text-bottom 水平对齐text-align:left|center|right|justify 首行缩进text-index:值 设置字大小写text-transform:capitalize|uppercase|lowercase|none); 设置颜色color:red; 设置字装饰效果text-decoration: underline|overline|line-through|blink|none; 注blink只在非ie中可用。 设置空格字符的处理方式 white-space:normal|pre|nowrap 设置是否显示及如何显示 display:none|block 换行word-wrap ： normal | break-word,16,1.6 常用的样式属性及值（续）,还可以只选择元素的第一个字母或第一行进行格式化。 基本语法： 选择器:first-letterfont-size:26px; color:#ff0066; 选择器:first-linefont-size:26px; color:#ff0066; 语法说明： 下面是关于此规定的一个实例。 p:first-letterfont-size:26px; color:#ff0066; p:first-linefont-size:26px; color:#ff0066;,17,1.6 常用的样式属性及值（续）,鼠标的样式cursor: auto :默认值。浏览器根据当前情况自动确定鼠标光标类型。 default :客户端系统的默认光标。通常是一个箭头。 hand :竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。 pointer :和 hand 一样。竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。 col-resize :有左右两个箭头，中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。 all-scroll :有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。,18,1.6 常用的样式属性及值（续）,crosshair :简单的十字线光标。 move :十字箭头光标。用于标示对象可被移动。 help :带有问号标记的箭头。用于标示有帮助信息存在。 no-drop :带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。 not-allowed :禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。 progress :带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。,19,1.6 常用的样式属性及值（续）,row-resize :有上下两个箭头，中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。 text :用于标示可编辑的水平文本的光标。通常是大写字母 i 的形状。 vertical-text :用于标示可编辑的垂直文本的光标。通常是大写字母 i 旋转90度的形状。 wait :用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。 *-resize :用于标示对象可被改变尺寸方向的箭头光标。 w|s|n|e|ne|sw|se|nw url(url) :用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。,20,1.6 常用的样式属性及值（续）,设置列表的样式 设置列表项所使用的预设标记 list-style-type: 无序列表 disc :默认值，实心圆 circle :空心圆 square :实心方块 有序列表 decimal :默认值，阿拉伯数字 lower-roman :小写罗马数字 upper-roman :大写罗马数字 lower-alpha :小写英文字母 upper-alpha :大写英文字母 none :不使用项目符号 可以把自己制作的图片设为项目符号 list-style-image:url(images/li.gif),21,1.6 常用的样式属性及值（续）,滚动条 scrollbar-3dlight-color :设置或检索滚动条亮边框颜色。 scrollbar-darkshadow-color:设置或检索滚动条暗边框颜色。 scrollbar-highlight-color :设置或检索滚动条3d界面的亮边颜色。 scrollbar-shadow-color:设置或检索滚动条3d界面的暗边颜色。 scrollbar-base-color:设置或检索滚动条基准颜色。其它界面颜色将据此自动调整。 scrollbar-face-color:设置或检索滚动条3d表面的颜色。 scrollbar-track-color:设置或检索滚动条的拖动区域颜色。 scrollbar-arrow-color:设置或检索滚动条方向箭头的颜色。当滚动条出现但不可用时，此属性失效。,22,1.7 div标记和span标记,html只是赋予内容的手段，大部分html标签都有其意义的，例如，标签p创建段落，h1标签创建标题等等，然而div和span标签似乎没有任何内容上的意义，听起来就像一个泡沫做成的锤子一样无用。但实际上，与css结合起来后，它们被用得十分广泛。我们所需要记住的是span和div是“无意义”的标签。它们的存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用。 它们被用来组合成一大块的html代码并赋予一定的信息，大部分用类属性class和标识属性id与元素联系起来。span和div的不同之处在于span是内联的，用在一小块的内联html中。而div（division）元素是块级的，简单地说，它等同于其前后有断行，用于组合一大块的代码，为html 文档内大块的内容提供结构和背景的元素，可以包含段落、标题、表格甚至其他部分，这使div便于建立不同集成的类。 div的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。,23,1.7 div标记和span标记(续),是块级容器标记，可以包含图片、标题、段落、文字等 我是容器，包含图片和和段落 是行级容器标记，不可以包含图片、标题、段落等，只能包含文字内容 所有韩款童装10元/件起拍喽 如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会有任何视觉上的差异，只有对它应用样式时，它才会产生视觉上的变化。 标记相互包含：与标记可以同时在网页上使用，一般在使用上建议用标记包含标记；但最好不包含标记，否则会造成标记的区域不完整，而形成断行的现象。,24,1.8 常用的样式属性及值,设置边框(border) 设置定边框风格border-style: border-top-style: border-bottom-style: border-left-style: border-right-style: 属性: dotted：点线式边框 dashed：破折线式边框 solid：直线式边框 double：双线式边框 groove：槽线式边框 ridge：脊线式边框 inset：内嵌效果的边框 outset：突起效果的边框 border-style:solid dotted double dashed,25,1.8 常用的样式属性及值（续）,设置边框粗细border-width: 设置边框的颜色：border-color: border属性是复合属性，设置对象的边框样式 语法：border : border-width border-style border-color 默认值为： medium none border-color 的默认值将采用文本颜色。 当你指定了边框颜色(border-color )和边框粗细( border-width )时，你必须同时指定边框样式( border-style )，否则边框不会被呈现。 如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。 例如：设置 border : thin 等于设置 border : thin none ，而 border-color 的默认值将采用文本颜色。因此此前的任何 border-color 和 border-width 设置都会被清除。,26,1.8 常用的样式属性及值（续）,设置方框 width height padding设置对象四边的内补丁，最多四个值padding:padding-top padding-bottom padding-left padding-right(注意当有一个值或两个值或三个值时分别是设置的那个边的内补丁) float设置浮动方式：浮动对象会向左或向右移动直到遇到边框(border）或内补丁（padding）或外补丁(margin) 或者另一个块对象( block-level )为止，就停止移动。对象浮动时会脱离正常的文档流。 clear ：不允许一边或者两边存在浮动对象left|right|both margin设置对象四边的外补丁也就是与其它元素的距离，最多四个值margin: margin-top margin-bottom margin-left margin-right,27,1.8 常用的样式属性及值（续）,背景(background) 背景色background-color: 背景图象background-image:url(images/bg.gif); 背景图象重复background-repeat:no-repeat|repeat|repeat-x|repeat-y; 背景图象的固定与滚动background-attachment:fixed|scroll; 背景图象的使用位置background-position:x y; x值:left right center 值(单位为象素) y值:top bottom center 值(单位为象素),28,1.8 常用的样式属性及值（续）,background属性是复合属性，设置背景样式。 语法：background : background-color background-image background-repeat background-attachment background-position 默认值为：transparent none repeat scroll 0 0。 背景样式属性的作用区域为对象的内容区域与内补丁(padding)区域。不包括边框(border)与外补丁(margin)区域。尽管该属性不可继承，但如果未指定，其父标记的背景颜色和背景图将在对象下面显示。,29,1.8 常用的样式属性及值（续）,对象定位 定位方式position: static :默认值。无特殊定位，对象遵循html定位规则。 absolute :绝对定位，使对象脱离原来的文档流，可以重叠。 fixed :未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范。 relative :相对定位，对象不可层叠，在正常文档流中偏移位置。 left: top: right: bottom:,30,1.8 常用的样式属性及值（续）,z-index:设置对象的叠放顺序 overflow设置当对象的内容超过其指定高度或宽度时如何管理内容 hidden|visible|scroll overflow-x设置水平方向 overflow-y设置垂直方向。 visibility这个属性是针对嵌套层的设置，如果存在嵌套的层（父层）和被嵌套的层（子层）时，可以使用inherit值设置子层继承父层的可见性，如果父层可见，子层也可见。当使用visible值时，无论父层是否可见，子层都可见。而值为hidden时，无论父层是否可见，子层都隐藏，与 display 属性不同，此属性为隐藏的对象保留其占据的物理空间。hidden,visible,inherit 设置对象的可视区域 clip:rect(top,left,right,bottom),31,1.9 盒子模型,盒子模型主要定义四个区域： 内容(content) 边框距，内容到边框的距离，内补丁(padding) 边界也叫边框(border) 边距，盒子与盒子之间的距离，外补丁(margin) 对于初学者，经常会搞不清楚margin，background-color，background-image，padding，content，border之间的层次、关系和相互影响。,32,1.9 盒子模型(续),33,第2章 滤镜filter,滤镜实际上是样式表一个新的扩展部分，使用这种技术简单的语法就可以把可视化的滤镜和转换效果添加到一个标准的html元素上。滤镜，并不是对图像进行了什么处理，而是在浏览器中对使用了该属性的对象进行一定的修饰。 注意：滤镜的特效，并不是所有的浏览器都支持，用户的浏览器必须在ie4.0/nc6.0之上才支持。 firefox浏览器有自己的滤镜。,34,2.1 界面滤镜procedural surfaces,alphaimageloader:在容器的内容和背景之间显示一张图片。 语法: filter:progid:dximagetransform.microsoft.alphaimageloader(enabled=bool , sizingmethod=ssize , src=surl) 参数： enabled:设置或检索滤镜是否激活。 sizingmethod:设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 (image,scale,crop) src:使用绝对或相对 url 地址指定背景图像。,35,2.1 界面滤镜procedural surfaces,gradient:在对象的背景和内容之间显示定制的色彩层。 语法：filter:progid:dximagetransform.microsoft.gradient(enabled=bool,startcolorstr=,endcolorstr=),36,2.2 静态滤镜static filters,alpha:设置对象内容的透明度 语法：filter:progid:dximagetransform.microsoft.alpha(enabled=bool,style=,opacity=,finishopacity=,startx=,starty,finishx=,finishy=) 参数： style 设置或检索透明渐变的样式。 opacity 设置或检索透明渐变的开始透明度。 finishopacity 设置或检索透明渐变的结束透明度。 startx 设置或检索透明渐变开始点的水平坐标。 starty 设置或检索透明渐变开始点的垂直坐标。 finishx 设置或检索透明渐变结束点的水平坐标。 finishy 设置或检索透明渐变结束点的垂直坐标,37,2.2 静态滤镜static filters,basicimage用于色彩处理，图像旋转，或对象内容的透明度 语法：filter : progid:dximagetransform.microsoft.basicimage ( enabled=benabled , grayscale=bgray , mirror=bmirror , opacity=fopacity , xray=bxray ) 参数 grayscale 设置或检索是否以灰度显示对象内容。 invert 设置或检索对象内容是否反相显示。 mask 设置或检索是否依据 maskcolor 的值为对象添加遮罩(mask)。 maskcolor 设置或检索遮罩颜色。 mirror 设置或检索是否反转显示对象内容。 opacity 设置对象内容的透明度。 rotation 设置或检索对象内容的旋转。 xray 设置或检索是否以x光效果显示对象内容。,38,2.2 静态滤镜static filters,blur：制作对象内容的模糊效果。 语法：filter : progid:dximagetransform.microsoft.blur ( enabled=benabled , makeshadow=bshadow , pixelradius=flradius , shadowopacity=fopacity ) 参数： makeshadow设置或检索对象的内容是否被处理为阴影显示。 pixelradius设置或检索模糊效果的作用深度。 shadowopacity设置或检索使用 makeshadow 制作成的阴影的透明度(暗度),39,2.2 静态滤镜static filters,chroma： 将对象中指定的颜色显示为透明。 语法：filter : progid:dximagetransform.microsoft.chroma ( enabled=benabled , color=scolor ) 参数： enabled设置或检索滤镜是否激活。 color设置或检索此滤镜作用的颜色值。 compositor： 依据初始对象和新对象色彩的特定混合方式显示新的对象内容 语法：filter : progid:dximagetransform.microsoft.compositor ( function=sfunction ) 参数：,40,2.2 静态滤镜static filters,dropshadow：制作对象的阴影效果。 语法：filter : progid:dximagetransform.microsoft.dropshadow ( enabled=benabled , color=scolor , offx=ioffsetx , offy=ioffsety , positive=bpositive ) 参数 function设置或检索混合方式。 color设置或检索此滤镜作用的颜色值。 offx设置或检索阴影在横坐标轴上以对象为基准的偏移量。 offy设置或检索阴影在纵坐标轴上以对象为基准的偏移量。 positive设置或检索滤镜是否从对象的非透明像素建立阴影。 emboss：用灰度值为对象内容制作浮雕纹理效果。 语法：filter : progid:dximagetransform.microsoft.emboss ( enabled=benabled , bias=fbias ) 参数：bias设置或检索滤镜是否从对象的非透明像素建立阴影。 engrave同上,41,2.2 静态滤镜static filters,glow：环绕对象内容边缘添加辉光制作发热效果。辉光将出现在对象边界内的内容的最外轮廓之外。 语法：filter : progid:dximagetransform.microsoft.glow ( enabled=benabled , color=scolor , strength=idistance ) 参数： color设置或检索此滤镜作用的颜色值。 strength设置或检索以对象为基准的向外扩散距离。 light： 为对象的内容建立光照效果。 语法：filter : progid:dximagetransform.microsoft.light ( enabled=benabled ),42,2.2 静态滤镜static filters,maskfilter：将对象内容的透明像素用 color 参数指定的颜色显示作为一个遮罩，而非透明像素则转为透明。 语法：filter : progid:dximagetransform.microsoft.maskfilter ( enabled=benabled , color=scolor ) 参数：color设置或检索此滤镜作用的颜色值。 matrix：使用矩阵变形实现对象内容的改变尺寸、旋转、上下或左右反转。 语法：filter : progid:dximagetransform.microsoft.matrix ( enabled=benabled , sizingmethod=smethod , filtertype=stype , dx=fdx , dy=fdy , m11=fm11 , m12=fm12 , m21=fm21 , m22=fm22 ),43,2.2 静态滤镜static filters,参数： sizingmethod设置或检索容器是否改变尺寸去适应目标图像。 filtertype设置或检索定义新内容的像素的方法。 dx设置或检索线性转换的向量增加 x 。 dy设置或检索线性转换的向量增加 y 。 m11设置或检索线性转换的第一行/第一列矩阵输入。 m12设置或检索线性转换的第一行/第二列矩阵输入。 m21设置或检索线性转换的第二行/第一列矩阵输入。 m22设置或检索线性转换的第二行/第二列矩阵输入。 motionblur：为对象内容制作运动模糊效果。 语法：filter : progid:dximagetransform.microsoft.motionblur ( enabled=benabled , add=baddimage , direction=ioffset , strength=idistance ) 参数： add设置或检索滤镜作用图像是否覆盖原始图像。 direction设置或检索滤镜效果的运动偏移方向。 strength设置或检索以对象为基准的在运动方向上的向外扩散距离。,44,2.2 静态滤镜static filters,shadow：为对象内容建立阴影效果。 语法：filter : progid:dximagetransform.microsoft.shadow ( enabled=benabled , color=scolor , direction=ioffset , strength=idistance ) 参数： color设置或检索此滤镜作用的颜色值。 direction设置或检索滤镜效果的运动偏移方向。 strength设置或检索以对象为基准的在运动方向上的向外扩散距离。 wave： 为对象内容建立波纹扭曲效果。 语法：filter : progid:dximagetransform.microsoft.wave ( enabled=benabled , add=baddimage , freq=iwavecount , lightstrength=ipercentage , phase=ipercentage , strength=idistance ) 参数： add设置或检索滤镜作用图像是否覆盖原始图像。 freq设置或检索滤镜建立的波浪数目。 lightstrength设置或检索滤镜建立的波浪浪尖和波谷之间的距离。 phase设置或检索正弦波开始处的相位偏移。 strength设置或检索以对象为基准的在运动方向上的向外扩散距离。,45,2.2 静态滤镜static filters,icmfilter：根据颜色配置文件(.icm)转换对象的色彩内容。 语法：filter : progid:dximagetransform.microsoft.icmfilter ( colorspace=spathfilename , intent =sintent ) 参数：intent设置或检索对象的色彩内容的预定效果。 gray：灰度显示对象内容。 语法：filter : gray ( enabled=benabled ) invert： 反相显示对象内容。 语法：filter : invert ( enabled=benabled ) xray：以x光效果显示对象内容。 语法：filter : xray ( enabled=benabled ) fliph：水平翻转对象内容。 语法：filter : fliph ( enabled=benabled ) flipv：垂直翻转对象内容。 语法：filter : flipv ( enabled=benabled ),46,2.3 转换滤镜transitions,barn：用模拟开关门效果转换对象内容。 语法：filter : progid:dximagetransform.microsoft.barn ( enabled=benabled , duration=fduration , motion=smotion , orientation=sorientation ) 参数： motion设置或检索对象的新内容是先从外显示还是先从内显示。 orientation设置或检索滤镜效果模拟的开关门是横向的还是纵向的。 duration设置或检索转换完成所用的时间。 percent设置或检索当前静态滤镜输出在转换进程中所处的点。 status检索转换的当前状态。,47,2.3 转换滤镜transitions,blendtrans：用渐隐效果转换对象内容。 语法：filter : blendtrans ( enabled=benabled , duration=fduration ) blinds：用百叶窗开关效果转换对象内容。 语法：filter : progid:dximagetransform.microsoft.blinds ( enabled=benabled , duration=fduration , bands=ibands , direction=sdirection ) 参数 bands设置或检索滤镜效果中有多少条百叶窗的窗格出现。 direction设置或检索百叶窗开关的方向。,48,2.3 转换滤镜transitions,checkerboard：用类似国际象棋棋盘的网格推拉效果转换对象内容。 语法：filter : progid:dximagetransform.microsoft.checkerboard ( enabled=benabled , duration=fduration , squaresx=icolumns , squaresy=icolumns , direction=sdirection ) 参数： squaresx设置或检索滤镜效果中横向有多少条。 squaresy设置或检索滤镜效果中纵向有多少条。 fade：用渐隐效果转换对象内容。 语法：filter : progid:dximagetransform.microsoft.fade ( enabled=benabled , duration=fduration , overlap=foverlap ) 参数： overlap设置或检索在转换进程中源内容和目标内容都被显示的比例。,49,2.3 转换滤镜transitions,gradientwipe用滚动渐隐效果转换对象内容。 语法：filter : progid:dximagetransform.microsoft.gradientwipe ( enabled=benabled , duration=fduration , gradientsize=fgradientwidth , motion=smotion ) 参数 gradientsize设置或检索对象内容被梯度渐隐条覆盖的百分比。 motion设置或检索对象内容出现的方向是依据 wipestyle 特性的设定，还是取反。 wipestyle 设置或检索转换是在水平方向上自左至右还是在垂直方向上自上至下。 inset：用对角扩张效果转换对象内容。 语法：filter : progid:dximagetransform.microsoft.inset ( enabled=benabled , duration=fduration ),50,2.3 转换滤镜transitions,iris：用特殊形状剪切轮廓扩张或收缩显示效果转换对象内容。 语法：filter : progid:dximagetransform.microsoft.iris ( enabled=benabled , duration=fduration , irisstyle=sshape , motion=smotion ) 参数 irisstyle设置或检索剪切轮廓的外形。 pixelate:这个转换滤镜是一个复杂的视觉效果。在转换的前半段，对象内容先显示为矩形色块拼贴，然后矩形的宽度由一个像素增加至 maxsquare 属性所设置的值。每个矩形的颜色由其所覆盖区域的像素的颜色平均值决定。接下来的转换的后半段，矩形被还原为新内容具体的图像像素，显示出新的内容。 语法：filter : progid:dximagetransform.microsoft.pixelate ( enabled=benabled , duration=fduration , maxsquare=iwidth ) 参数 maxsquare设置或检索转换中矩形色块的最大宽度。,51,2.3 转换滤镜transitions,radialwipe：用放射状擦除效果转换对象内容。效果类似汽车挡风玻璃的刮雨刀。 语法：filter : progid:dximagetransform.microsoft.radialwipe ( enabled=benabled , duration=fduration ,wipestyle=sstyle ) 参数 wipestyle wipestyle 设置或检