`

filter属性

阅读更多
       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

今天我是在javascript里面用到的一个小哥~~~~~~~比如某个对象 document.getElementById("ID").filter= dropshadow("#000000");

这个是javascript的实现的文字的阴影效果吧
  例子:filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")

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

今天我是在javascript里面用到的一个小哥~~~~~~~比如某个对象 document.getElementById("ID").filter= dropshadow("#000000");

这个是javascript的实现的文字的阴影效果吧
分享到:
评论

相关推荐

    Css中的filter属性语法说明.

    在CSS中,`filter`属性是一种非常实用且强大的特性,它可以用来改变元素的渲染方式,实现各种视觉效果,如模糊、阴影、颜色调整等。本文将详细介绍CSS中的`filter`属性及其各种效果的具体用法。 ### 1. Alpha ####...

    5.5 CSS3中filter属性详解|模糊效果和filter|canvas项目综合实战|Canvas图形、动画、游戏开发从入门到精通全系列课程

    5.5_CSS3中filter属性详解|模糊效果和filter|canvas项目综合实战|Canvas图形、动画、游戏开发从入门

    CSS中filter属性的使用详解

    filter属性允许开发者将图形效果(如模糊和颜色偏移)应用于元素,而不需要使用图形编辑软件。这些效果可以被应用于整个文档,特定元素,甚至是整个元素的内容,如图片和文字。 接下来,我们将详细解读filter属性中...

    filter属性[定义].pdf

    Alpha 滤镜的语法为 `{FILTER : ALPHA(opacity= 属性值1 ,finishOpacity= 属性值2 ,style=属性值3,startx= 属性值4 ,starty=属性值5 ,finishx= 属性值6 ,finishy= 属性值7 )}`。该滤镜能够使对象呈现渐变半...

    css3 filter滤镜属性制作图片滤镜特效

    总结起来,CSS3的filter属性为网页设计师提供了强大的图片滤镜功能,通过熟练掌握和灵活运用这些滤镜,可以创作出富有创意和视觉冲击力的网页效果。在实际应用中,不断尝试和探索新的组合,你会发现滤镜带来的无限...

    CSS filter滤镜

    CSS 滤镜 filter 属性及用法详解 CSS 滤镜 filter 属性是 CSS 中的一种视觉效果属性,用于设置对象的视觉外观。filter 属性可以将对象变换为不同的视觉效果,如模糊、透明、投影、镜像等。下面是 filter 属性的详细...

    css3filter十个效果示例

    虽然不直接属于filter属性,但常与之结合使用,调整元素的透明度,0%表示完全透明,100%表示完全不透明。 8. **剪切(inset)** `filter: drop-shadow(inset 2px 2px 2px red);` 创建内阴影效果,参数值依次为...

    VB实现浏览查看文件属性

    OpenFileDialog控件的设置主要包括其Filter属性,用于设定用户可以选择的文件类型。例如,如果只想让用户选择文本文件,可以设置为"All Text Files (*.txt)|*.txt"。然后,通过调用OpenFileDialog1.Show方法,可以弹...

    canvas学习(十九):css3 filter的十种特效

    通过利用filter属性,我们可以无需复杂的图像编辑软件,直接在浏览器中实现图像的变换和修饰。以下是关于CSS3 filter的一些关键知识点: 1. **模糊滤镜(blur)**: 使用`filter: blur(px)`可以为元素添加模糊效果...

    HTML5设置filter图片滤镜代码.zip

    滤镜效果是通过CSS3的filter属性实现的,它可以对元素(如图片)应用一系列图像处理效果,就像Photoshop等图形编辑软件中的滤镜一样。这些滤镜包括模糊(blur)、灰度(grayscale)、亮度和对比度调整(brightness和...

    CSS filter属性详解

    filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像,背景和边框的渲染。 CSS标准里包含了一些已实现预定义效果的函数。你也可以参考一个SVG滤镜,通过一个URL链接到SVG滤镜元素(SVG filter...

    css中filter属性和backdrop-filter的应用与区别详解

    ### CSS中`filter`属性和`backdrop-filter`的应用与区别详解 #### 一、`filter`属性 在CSS3中,`filter`属性提供了一种简单而强大的方式来为HTML元素应用各种视觉效果。这些效果包括但不限于模糊、亮度调整、对比...

    IE应用了filter后mouseover事件异常

    在IE浏览器中,filter属性是微软特有的,支持一系列不同的滤镜,比如`alpha(opacity=50)`用于设置透明度。 然而,当一个元素应用了filter属性,并且该元素或者其子元素绑定了mouseover事件,IE浏览器可能无法正确...

    wpf data filter

    - **使用ICollectionView**:创建一个ICollectionView实例,如ListCollectionView,然后设置其Filter属性为一个方法,该方法接受数据项作为参数并返回布尔值。当Filter方法返回true时,数据项将在视图中显示;返回...

Global site tag (gtag.js) - Google Analytics