推荐个Css的filter常用滤波器属性及语句大全_基础教程

Css的filter常用滤波器属性及语句大全

语法:STYLE="filter:filtername(fparameter1, fparameter2...)" 
  (Filtername为滤镜的名称,fparameter1、fparameter2等是滤镜的参数) 

  滤镜说明: 

  Alpha:设置透明层次 
  blur:创建高速度移动效果,即模糊效果 
  Chroma:制作专用颜色透明 
  DropShadow:创建对象的固定影子 
  FlipH:创建水平镜像图片 
  FlipV:创建垂直镜像图片 
  glow:加光辉在附近对象的边外 
  gray:把图片灰度化 
  invert:反色 
  light:创建光源在对象上 
  mask:创建透明掩膜在对象上 
  shadow:创建偏移固定影子 
  wave:波纹效果 
  Xray:使对象变得像被x光照射一样 

  1、滤镜:Alpha 
  语法:STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity,Style=style, StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)"  
  说明: 
  Opacity:起始值,取值为0~100, 0为透明,100为原图。 
  FinishOpacity:目标值。 
  Style:1或2或3 
  StartX:任意值 
  StartY:任意值 
  例子:filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")  

  2、滤镜:blur 
  语法:STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)" 
  说明: 
  Add:一般为1,或0。 
  Direction:角度,0~315度,步长为45度。 
  Strength:效果增长的数值,一般5即可。 
  例子:filter:Blur(Add="1",Direction="45",Strength="5") 

  3、滤镜:Chroma 
  语法:STYLE="filter:Chroma(Color = color)" 
  说明:color:#rrggbb格式,任意。 
  例子:filter:Chroma(Color="#FFFFFF") 

  4、滤镜:DropShadow 
  语法:STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)" 
  说明:Color:#rrggbb格式,任意。 
  Offx:X轴偏离值。 
  Offy:Y轴偏离值。 
  Positive:1或0。 
  例子:filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1") 

  5、滤镜:FlipH 
  语法:STYLE="filter:FlipH"  
  例子:filter:FlipH  

  6、滤镜:FlipV 
  语法:STYLE="filter:FlipV" 
  例子:filter:FlipV  

  7、滤镜:glow 
  语法:STYLE="filter:Glow(Color=color, Strength=strength)" 
  说明: 
  Color:发光颜色。 
  Strength:强度(0-100) 
  例子:filter:Glow(Color="#6699CC",Strength="5") 

  8、滤镜:gray 
  语法:STYLE="filter:Gray" 
  例子:filter:Gray 

  9、滤镜:invert 
  语法:STYLE="filter:Invert" 
  例子:filter:Invert 

  10、滤镜:mask 
  语法:STYLE="filter:Mask(Color=color)" 
  例子:filter:Mask (Color="#FFFFE0") 

  11、滤镜:shadow 
  语法:filter:Shadow(Color=color, Direction=direction) 
  说明: 
  Color:#rrggbb格式。 
  Direction:角度,0-315度,步长为45度。 
  例子:filter:Shadow (Color="#6699CC", Direction="135") 

  12、滤镜:wave 
  语法:filter: Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength) 
  说明: 
  Add:一般为1,或0。 
  Freq:变形值。 
  LightStrength:变形百分比。 
  Phase:角度变形百分比。 
  Strength:变形强度。 
  例子:filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2") 

  13、滤镜:Xray 
  语法:STYLE="filter:Xray"  
  例子:filter:Xray 

14.颜色变化
语法:
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#B5CCFA', EndColorStr='#B5CCFA');

时间: 2024-11-10 01:13:02

推荐个Css的filter常用滤波器属性及语句大全_基础教程的相关文章

一些易混淆且不常用的属性,希望有用_基础知识

1. readonly [text password textarea] 將元素設置為只讀方式,也就是不能編輯的狀態,與disabled不同的是,readonly不會將字符變為暗灰色 <input type=text readonly value=READONLY> <input type=text disabled value=DISABLED> 2. defaultValue [所有FORM元素] 他的作用是返回元素的最初設置時的 VALUE 屬性的內容,也就是 <inp

IE里button设置border:none属性无效解决方法_基础教程

某个元素设置无边框,只需要给元素设置border:none即可,当然设置border:0效果一样,但实际上两者是有性能差别的 复制代码 代码如下: border:none:边框设置为为none,不做任何处理:border:0:边框宽度设置为0像素,但是实际上border-color和border-style还是在渲染的. 然而在IE中,对于button和input元素确并不是这样,在IE6,7中border:none仅等价于border-style:none,而边框所占的空间还是在的.这导致了调

HTML代码中标签的全部属性 中文注释说明_基础知识

例:写一段图片HTML代码 <img src="http://localhost/phpwind6/zx/6.jpg" id="imgs" lang="en-us" alt="测试"> 该标签为img的代码中已可以看出已含有了四个属性,包括src id lang alt,加上本身的img标签有5个属性. 那么该img标签在正常的情况下倒底还含有多个属性?(包含对象),我现在为大家一一列出来(以上面那句代码为例,并附

css滤镜效果(二)_基础教程

7.Gray ,Invert,Xray 滤镜 语法:{filter:gray} ,{filter:invert},{filter:xray} Gray滤镜是把一张图片变成灰度图:Invert滤镜是把对象的可视化属性全部翻转,包括色彩.饱和度.和亮度值:Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮,也就是所谓的"X"光片. 效果如下: 8.Light  滤镜 语法:Filter{light} 这个属性模拟光源的投射效果.一旦为对象定义了"LIGHT"滤镜属性,那

从零学CSS系列之文本属性_基础教程

1.line-height 可以给某个元素指定一个不带单位的缩放因子,这样它的后代元素就会继承这个缩放因子,再根据自身的字号大小来计算自己的行高(line-height)值, 复制代码 代码如下: body {  font-size: 12px;  line-height: 1.5;} h1 {  font-size: 36px;} 这里,body 的 line-height 是 18px(12 * 1.5),而 h1 的 line-height 则是 54px(36 * 1.5). 就算使用

CSS教程之css选择器 、属性、值_基础教程

body {      font-size: 0.8em;      color: navy;  }  上面的意思是为body选择器设置font-size字体大小和color字体颜色.  所以基本的,当它作用与HTML页面时,在body标签(整个窗口中的内容)之间的文字颜色是navy字体大小是0.8ems.  长度和百分比  CSS里面有许多属性值要指定单位,但有些基本单位被使用在一些属性上,在这之前值得属性下它们.  em比如font-size:2em给于字体计算出的大小,所以2em就是实际字

bc1998录制的css视频教程推荐新手看下_基础教程

颜色 型号 价格 第一件衣服 红色 大 100 第二件衣服 绿色 小 120 第一件裤子 红色 大 230 第二件裤子 绿色 小 240 第三件衣服 红色 大 90 第四件衣服 绿色 小 100

第7天:CSS入门_基础教程

在了解XHTML代码规范后,我们就要进行CSS布局.首先先介绍一些CSS的入门知识.如果你已经很熟悉了,可以跳过这一节,直接进入下一节. CSS是Cascading Style Sheets(层叠样式表)的缩写.是一种对web文档添加样式的简单机制,属于表现层的布局语言. 1.基本语法规范 分析一个典型CSS的语句: p {COLOR:#FF0000;BACKGROUND:#FFFFFF} 其中"p"我们称为"选择器"(selectors),指明我们要给"

css滤镜基础教程_基础教程

CSS滤镜基础     随着网页设计技术的发展,人们已经不满足于原有的一些HTML标记,而是希望能够为页面添加一些多媒体属性,例如滤镜的和渐变的效果.CSS技术的飞快发展使这些需求成为了现实.从现在开始我要为大家介绍一个新的CSS扩展部分:CSS滤镜属性(Filter Properties).使用这种技术可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上,例如图片.文本容器.以及其他一些对象.对于滤镜和渐变效果,前者是基础,因为后者就是滤镜效果的不断变化和演示更替.当滤镜和渐变效果结合到