第7章 其他CSS属性.docVIP

第7章 其他CSS属性 课前导读 前面我们介绍了CSS的标准属性，实际上很多源于“IE标准”而非W3C标准的CSS属性或属性值也因为IE浏览器的主导地位而被广泛使用。本章将介绍部分十分常用的“IE标准”CSS属性。 本章重点 在本章我们将重点学习： 滚动条属性 CSS滤镜 7.1 滚动条属性 IE浏览器支持如下几个关于滚动条的CSS属性，我们在介绍完这7个属性之后通过图示说明各属性值对应的滚动条部位。 7.1.1 scrollbar-3d-light-color 属性：scrollbar-3d-light-color 属性值：颜色 继承性：有 描述：设置滚动条3D效果下的亮边框颜色。。。。。。scrollbar-3d-light-color：对应图中的1。（IE6.0不支持） （2）scrollbar-highlight-color：对应图中的2。 （3）scrollbar-face-color：对应图中的3。 （4）scrollbar-dark-shadow-color：对应图中的4。 （5）scrollbar-shadow-color：对应图中的5。 （6）scrollbar-arrow-color：对应图中的6。 （7）scrollbar-base-color：该属性较特殊，除了滚动条上的黑色箭头，其他部分都会受到该属性的影响。 此外图中的7所指示的部分会受到scrollbar-highlight-color、scrollbar-face-color以及scrollbar-base-color的影响。 7.2 CSS滤镜 在IE的专属的CSS属性中filter是一个特殊的属性，我们常把它称作CSS滤镜。该属性的属性值将是我们本章的介绍对象，我们先通过一个例7-1来了解一下filter属性的用法及其大致的作用。 例7-1 CSS滤镜 html headtitleCSS滤镜/title/head body img src=mount.jpg img src=mount.jpg style=filter:blur(strength=70) /body /html 该例运行结果如图7-2。 图7-2 CSS滤镜 对比两幅图像，能够很清楚地看出第二幅图像的模糊效果，以往我们只能通过使用图像编辑软件编辑出来的效果使用filter属性轻松实现了。观察例7-1中的代码，我们看到实现这一效果，只需要将blur(strength=70)做为filter属性值就可以了。接下来我们介绍的CSS滤镜效果都是做为filter属性值使用的。 7.2.1 Alpha滤镜starty=starty, finishx=finishx,finishy=finishy) 参数值： opacity：透明度。0-100，0为绝对透明，不可见；100为不透明。 finishopacity：可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。 style：透明区域的形状特征。0代表不使用透明效果、1代表线型、2代表放射状、3代表长方形。 startx：代表渐变透明效果的开始X坐标。 starty：代表渐变透明效果的开始Y坐标。 finishx：代表渐变透明效果结束的X坐标。 finishy：代表渐变透明效果结束的Y 的坐标。 说明： 该滤镜实现元素的透明效果。 通过例7-2，我们来看一下alpha滤镜的用法。 例7-2 alpha滤镜 html head titleCSS滤镜-alpha/title /head body img src=mount.jpg width=100 style=filter:alpha(opacity=20) img src=mount.jpg width=100 style=filter:alpha(style=0) img src=mount.jpg width=100 style=filter:alpha(style=1) img src=mount.jpg width=100 style=filter:alpha(style=2) img src=mount.jpg width=100 style=filter:alpha(style=3) img src=mount.jpg width=100 style=filter:alpha(opacity=0,finishopacity=100,style=2) img src=mount.jpg width=100 style=filter:alpha(opacity=100,finishopacity=0,style=2) img src=mount.jpg width=100 style=filter:alpha(opa