当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 样 式 表 全 接 触(7)

HTML/XHTML教程
CSS 循序渐进(四)表里春秋
精通 CSS 滤镜(五)
让css使网页图片半透明
实现页面图片阴影特效
发现CSS控件的好处
用CSS缩写给你的网站加速
CSS在IE和Nascape的显示差别
利用CSS,不通过replace替换标引HTML标记
拒绝单调 让网页超链接拥有多姿多彩的下划线
对CSS类及id的规范化命名
利用css里expression来实现界面对象的批量控制
利用CSS控制打印
第一章 CSS的基本认识
第二章 CSS的应用方式
第三章 CSS的应用补充
第四章 颜色背景的CSS
第五章 文字性质的CSS
第六章 区块性质的CSS
HTML之其他标记
HTML之链接标记

HTML/XHTML教程 中的 样 式 表 全 接 触(7)


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 116 ::
收藏到网摘: n/a

八、滤镜的参数及其作用

1、Alpha 滤镜

  语法:{FILTER:ALPHA(opacity=属性值1,finishopacity=属性值2,style=属性值3,startx=属性值4,starty=属性值5,finishx=属性值6,finishy=属性值7)}

  作用:该滤镜能够使对象呈现渐变半透明效果,其效果是由小括号中的各属性名及其对应的属性值决定。

  参数:Opacity 属性是设置不透明的程度,用百分比表示其属性值,大小是从0到100,0表是完全透明,100表示完全不透明。

  FinishOpacity 属性是一个同Opacity一起使用的选择性的参数,当同时设定Opacity和FinishOpacity时,可以制作出透明渐进的效果;其属性值也是从0到100,0表是完全透明,100表示完全不透明。

  Style属性是用来设置渐变风格的,当同时设定了Opacity和finishOpacity产生透明渐进时,它主要是用来指定渐进的显示形状,0代表均匀渐进;1代表线形渐进;2代表放射渐进;3代表直角渐进。

  StartX 属性是用来设置水平方向渐进的起始位置。

  FinishX属性是用来设置水平方向渐进的结束位置。

  FinishY属性是用来设置竖直方向渐进的结束位置。

  实例:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<meta name="GENERATOR" content="Microsoft 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<title>样式表滤镜实例</title>

<style>

<!--

p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold }p {filter:alpha(opacity=80,style=0,starX=2,finishX=4);}

-->

</style>

</head>

<body>

<p>样式表滤镜实例</p>

</body>

</html>

2、BLUR滤镜

  语法:{filter:blur(add=属性值1,direction=属性值2,strength=属性值3);}

  作用:该滤镜能够使对象表现一种模糊的效果,其效果是由小括号中的各属性名及其对应的属性值决定。

  参数:add属性是用来确定是否在运动模糊中使用原有目标,其属性值有0和1两种,0属性值意思是在模糊运动中不使用原有目标,大多数情况下适用于图象;1属性值代表在模糊运动中使用原有目标,大多数情况下适用于文本。

  direction属性是用来表示模糊移动时的角度,其属性值为0到360度。

  strength属性是用来表示模糊移动时的距离,该属性值一般可以任意设置。

  实例:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<title>样式表滤镜实例</title>

<style>

<!--

p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold }

p {filter:blur(add=1,direction=60,strength=2);}

-->

</style>

</head>

<body>

<p>样式表滤镜实例</p>

</body>

</html>

3、DropShadow 滤镜 

     

  语法:{filter:dropshadow(color=属