css滤镜属性语法介绍
程序员文章站
2024-02-27 19:30:51
css滤镜 style属性： 可以应用在标签中，更可用广泛应用在
| ...
css滤镜
style属性： 可以应用在标签中，更可用广泛应用在<table><tr><td><body> <center><img><input><font><form><frame><label><map>等等标签中， 更重要的是，它可用在标签中。 页面切换效果： 在页面前部与之间加入"" 说明：duration为页面切换的时间长度，3.000表示3秒钟，一般可以直接输 入3便可；transition为切换效果，从1-23共22种不同的切换效果，其中23 为随机效果。 滤镜效果： photoshop的滤镜用的多了吧，在页面中也用滤镜搞搞新意思吧！ 语法: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="40",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 |