当前位置:  编程技术>WEB前端

css滤镜属性语法介绍

    来源: 互联网  发布时间:2014-09-06

    本文导语:  css滤镜  Style属性:   可以应用在标签中,更可用广泛应用在 等等标签中, 更重要的是,它可用在标签中。 页面切换效果: 在页面前部与之间加入"" 说明:duration为页面切换的时间长度,3.000表示3秒钟,一般可以直接输 ...

css滤镜 
Style属性:
  可以应用在标签中,更可用广泛应用在
等等标签中,
更重要的是,它可用在标签中。
页面切换效果:
在页面前部与之间加入""
说明:duration为页面切换的时间长度,3.000表示3秒钟,一般可以直接输
入3便可;transition为切换效果,从1-23共22种不同的切换效果,其中23
为随机效果。
滤镜效果:
Photoshop的滤镜用的多了吧,在页面中也用滤镜搞搞新意思吧!
语法:filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,
说明:
Opacity:起始值,取值为0-100,0为透明,100为原图.
FinishOpacity:目标值.
Style:1或2或3
StartX:任意值
StartY:任意值
例子:filter:Alpha(Opacity="0",FinishOpacity="40",)
2.滤镜:blur
语法:

说明:
Add:一般为1,或0.
Direction:角度,0-315度,步长为45度.
Strength:效果增长的数值,一般5即可.
例子:filter:Blur(Add="1",Direction="45",Strength="5")
3.滤镜:chroma
语法:

说明:
color:#rrggbb格式,任意.
例子:filter:Chroma(Color="#FFFFFF")
4.滤镜:DropShadow
语法:

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

例子:filter:FlipH
6.滤镜:FlipV
语法:

例子:filter:FlipV
7.滤镜:Glow
语法:

说明:
Color:发光颜色.
Strength:强度(0-100)
例子:filter:Glow(Color="#6699CC",Strength="5")
8滤镜:Gray
语法:

例子:filter:Gray
9.滤镜:Invert
语法:

例子:filter:Invert
10.滤镜:Mask
语法:

例子: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
语法:

例子:filter:Xray 

    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • CSS3 box-flex-group 属性
  • CSS属性 - white-space 空白属性使用说明
  • CSS3 rotation 属性
  • CSS教程之css选择器 、属性、值
  • CSS empty-cells 属性
  • jQuery设置CSS属性(示例)
  • CSS table-layout 属性
  • jQuery 设置 CSS 属性示例介绍
  • CSS3 grid-rows 属性
  • CSS属性搜索 Browser Support
  • CSS border-spacing 属性
  • jquery控制css的display属性(显示与隐藏)
  • CSS caption-side 属性
  • CSS 关于网页图片的属性
  • CSS3 target-new 属性
  • jquery控制css display属性(控制元素显示与隐藏)
  • CSS3 box-lines 属性
  • jQuery修改CSS伪元素属性的方法
  • CSS3 grid-columns 属性
  • jquery控制css元素的display(显示与隐藏)属性
  • CSS3 text-outline 属性
  • css white-space:nowrap属性用法(可以强制文字不换行输出)
  • java命名空间javax.swing.text.html类css的类成员方法: css定义及介绍
  • <!--@import"css/cssset/.css-->,css/cssset/.css是什么意思?
  • java命名空间javax.swing.text.html类css的类成员方法: getattribute定义及介绍
  • CSS预处理器 Less CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: font定义及介绍
  • css强制换行 css强制不换行的css方法
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: margin定义及介绍
  • CSS代码格式化 CSS Beautify
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: padding定义及介绍


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3