css 滤境的详细介绍

导读:
  【alpha滤镜属性】这个名字,在flash和photoshop经常见到。它们的作用基本类似,就是把一个目标元素与背景混合。你可以指定数值来控制混合的程取u庵帧坝氡尘盎旌稀蓖ㄋ椎厮稻褪且桓鲈 氐耐该鞫取mü 付ㄗ 辏 梢灾付ǖ恪⑾摺⒚娴耐该鞫取s捎凇癆lpha”滤镜的参数多,我们先来看一下下图:
  “opacity”:代表透明度程度。范围是从0~100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。
  “finishopacity”:是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。
  “style”:指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表放射状、3代表长方形。
  “startx”和“starty”:代表渐变透明效果的开始x和y坐标。
  “finishx”和“finishy”:代表渐变透明效果结束x和y坐标。
  blendtrans 属性
  【blendtrans属性】淡入淡出的效果滤镜,能产生极精细的图片转换效果。
  blendtrans滤镜功能也比较单一,只有一个参数:duration(变换时间)。需要借助于 javascript来调用它的方法来实现转换功能。使用blendtrans滤镜,首先您要准备几张宽高尺 寸相同的图片,并分别命名,保存在图像目录下,如:images/*.jpg。如果用4幅的话,分别 取名为:blen1.jpg; blen2.jpg; blen3.jpg;blen4.jpg。
  blur属性
  【blur属性】把blur滤镜加载到文字上,可产生立体字的效果,加载到图片上,可以产生风吹模糊效果。不仅美化了网页,也为你的网页减轻了分量。
  下面介绍一下blur滤镜的参数,以便你灵活应用:
  add:是否让blur滤镜起作用,add=false(或“0”)时blur滤镜不起作用,取true(或非“0”值)时blur滤镜起作用,只有两个值,即true和false;
  direction:阴影的方向,取值范围0~360度,45度一个间隔,所以实际上只有八个方向值;
  strength:它代表有多少个像素的宽度成为阴影,你也可以简单地理解为阴影的长度。它只能用整数来指定,默认值是5个像素,你可以根据实际需要来指定阴影的长度。我上面的两个图片例子是用的同一个滤镜,strength是10个像素。同一网页中对不同的对象可以使用不同参数的blur滤镜,你只要给它们取不同的名称就行了。
  chroma 属性
  【chroma属性】 chroma属性可以设置一个对象中指定的颜色为透明色,它的表达式如下:
  filter:chroma(color=color)
  这个属性的表达式是不是很简单,它只有一个参数。只需把您想要指定透明的颜色用 color参数设置出来就可以了。
  dropshadow 属性
  【dropshadow属性】作用是添加对象的阴影效果。实际效果看上去就象是原来的对象离开了页面,然后在页面上显示出该对象的投影。其工作原理是建立一个偏移量,然后加上颜色。
  dropshadow滤镜有四个参数,它们的含义为:
  “color”:代表投射阴影的颜色。
  “offx”和“offy”:分别是x方向和y方向阴影的偏移量,它必须用整数值,如果是正整数,那么表示阴影向x轴的右方向和y轴的下方向。若是负整数值,阴影的方向正好相反。另外“offx”和“offy”数值的大小决定了阴影离开对象的距离;
  “positive”参数:如果为“true(非0)”,那么就为任何的非透明像素建立可见的投影。如果为“fasle(0)”,那么就为透明的像素部分建立透明效果。
  对文字加载dropshadow滤镜比较方便的办法,是把dropshadow滤镜加载到文字所在的表格单元格< td >上。文字比较小时,使用dropshadow的效果不太理想,所以一般用于制作稍大的标题字。
  dropshadow滤镜对一般图片无效,但我们把图片放到表格中,再给表格的加载 dropshadow滤镜,将会产生一种图片有了立体边框的效果。
  fliph 属性
  【flipv 属 性】flipv是一个垂直翻转对象的滤镜,当把flipv加载到一个对象上,该对象将产生一个垂直镜象,以此来创造垂直翻转的效果;它是无参数滤镜之一。功能单一,使用方便,效果显著。
  css 滤境的详细介绍2
  glow 属性
  【glow属性】对象应用glow 滤镜后,这个对象的边缘就会产生类似发光的效果,这种效果在图像处理软件中做起来比较麻烦,而在dw mx 2004中用css摹癵low”滤镜来制作却是很简单,而且节约不少字节。
  “glow”滤镜只有两个参数,一个是“color”是指定发光的颜色,另一个参数是 “strength”是发光的强度,也可理解为光芒的长度。取值范围1~255之间的任何整数。下面 我们来做几个应用实例。
  【glow滤镜在图片上的应用】
  “glow”滤镜加载到一般图片无效,但若是把图片放到表格中,再给表格的< td >加上“glow”滤镜,却能使图片产生一个渐变颜色的边框。
  glow滤镜的参数不多,使用简单,效果明显。在具体应用时关键的问题是光芒颜色的选择,要与整个页面色彩协调。给图片和< td >可以用多种方式加载,配合背景的设置,可产生一些奇特的效果。
  gray 属性
  【gray 属性】 gray 滤镜可把一张彩色图片转变为灰度图,即黑白图片。可应用于创意特殊题材,gray为无参数滤镜,功能单一,操作简单,效果明显。
  invert属性
  【invert 属性】 invert 滤镜可把一张图片转变为负片,好像相片的底片。可应用于创意特殊题材,invert为无参数滤镜,功能单一,操作简单,效果明显。
  light 属性
  【light属性】light滤镜能产生一个模拟光源的效果。可应用于特殊场合,营造奇特的气氛。light滤镜是无参数滤镜,使用它要通过javascrpt调用来实现模拟光源的效果。
  mask 属性
  【mask 属性】mask滤镜可以为网页元件对象产生一个矩形遮罩效果,实际也可以理解为用一块有色布把物件盖起来,但内容却被挖去了。
  【mask滤镜应用】
  在页面适当位置插入1行1列表格,在表格里输入文字,选择表格的单元格,然后,在属性面板“样式”菜单中选“mask”。
  revealtrans 属性
  revealtrans是动态滤镜,它能产生23种动态效果,更为奇妙的是它还能在23种动态效果中随机抽取其中一种。
  revealtrans滤镜只有两个参数,duration:是切换时间,以秒为单位;transition:是切换方式,它有23种方式,详见下图:
  你只要改变“transition的值,就能获得不同的效果。它必须借助于javascript才能实现,javascript的设置方法请参考【blendtrans属性】。
  shadow 属性
  【shadow 属性】利用“shadow”滤镜可以在指定的方向建立物体的投影。投影的颜色可以指定。
  wave 属性
  【wave属性】 是把对象按照垂直的波形样式扭曲,而产生一种特殊的效果。 把“wave”滤镜加载到文字上,就可得到波形文字的效果。
  提示:wave滤镜共有5个参数:
  “add”:表示是否要把对象按照波形式样扭曲,它只有两个值,即true和false,默认值是true(非0),当然你也可以修改它的值为false(0)。
  “freq”:是波纹的频率,也就是指定在这个对象上面一共需要产生多少个完整的波纹。
  “lightstrength”:参数可以对于波纹增强光影的效果。它的参数值范围是从0到100的整数值。
  “phase”:参数用来设置正弦波开始的偏移量。这个偏移量的通用值为0,但是你可以改变它。它的值从0到100之间,这个数值代表开始时的偏移量取自波长的百分比值。 例如如果值为25那么正弦波就从90度的方向开始。
  “strength”:表示波形的振幅大小,也可以简单的理解为扭曲的程度。
  xray 属性
  【xray 属性】 xray 滤镜可把对象的轮廓显现出来并将其加亮。就象“x光片”一样。可应用于创意特殊题材,xray为无参数滤镜,功能单一,操作简单,效果明显。
  应用类样式
  【应用类样式】是唯一可以应用于文档中任何文本的 css 样式类型。与当前文档关联的所有类样式都显示在“css 样式”面板中和文本属性检查器的“样式”弹出式菜单中。
  提示:当预览外部 css 样式表中定义的样式时,务必要保存该样式表以确保所做的更改。
  【应用自定义 css 样式】
  在文档中,选择要应用 css 样式的文本。
  将插入点放在段落中将样式应用于整个段落。
  如果在单个段落中选择一个文本范围,则 css 样式只影响所选范围。
  若要指定要应用 css 样式的确切标签,请在位于“文档”窗口左下角的标签选择器中选择标签。
  请执行下列操作之一:
  在“css 样式”面板(“窗口”>“css 样式”)中,右键单击要应用的样式的名称,然后从上下文菜单选择“套用”。
  在文本属性检查器中,从“样式”弹出式菜单中选择要应用的类样式。
  在“文档”窗口中,右键单击所选文本,在上下文菜单中选择“css 样式”,然后选择要应用的样式。
  选择“文本”>“css 样式”,然后在子菜单中选择要应用的样式。
  【将自定义样式从选定内容中删除】
  选择要删除样式的对象或文本。 执行下列操作之一:
  在文本属性检查器中,从“样式”弹出式菜单中选择“无”。
  在“相关 css”选项卡中右键单击要删除的已应用规则,然后从上下文菜单中选择“设置类”>“无”。
  【关于 css 样式的冲突】将两个或更多的 css 样式应用于同一文本时,这些样式可能发生冲突并产生意外的结果。浏览器根据以下规则应用样式属性:
  如果将两种样式应用于同一文本,浏览器显示这两种样式的所有属性,除非特定的属性发生冲突。例如,一种样式可能将蓝色指定为文本颜色,而另一种样式可能指定红色作为文本颜色。
  如果应用于同一文本的两种样式的属性发生冲突,则浏览器显示最里面的样式(离文本本身最近的样式)的属性。因此,如果外部样式表和内联 css 样式同时影响文本元素,则应用内联样式。
  如果有直接冲突,则 css 样式(使用 class 属性应用的样式)中的属性将取代 html 标签样式中的属性。

本文转自
http://hi.baidu.com/licustom/blog/item/ab9c29fa9ea5a18a9f514663.html

本文链接:https://my.lmcjl.com/post/6020.html

展开阅读全文

4 评论

留下您的评论.