CSS滤镜语法

发布 2021-05-11 04:53:28 阅读 8311

语法:style="filter:filtername(fparameter1, fparameter2...

filtername为滤镜的名称,fparameter1、fparameter2等是滤镜的参数) 滤镜说明: alpha:设置透明层次 blur:

创建高速度移动效果,即模糊效果 chroma:制作专用颜色透明 dropshadow:创建对象的固定影子 fliph:

创建水平镜像** flipv:创建垂直镜像** glow:加光辉在附近对象的边外 gray:

把**灰度化 invert:反色 light:创建光源在对象上 mask:

创建透明掩膜在对象上 shadow:创建偏移固定影子 w**e:波纹效果 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、滤镜:w**e 语法:

filter: w**e(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength) 说明: add:

一般为1,或0。 freq:变形值。

lightstrength:变形百分比。 phase:

角度变形百分比。 strength:变形强度。

例子:filter: w**e(add="0", phase="4", freq="5", lightstrength="5", strength="2") 13、滤镜:

xray 语法:style="filter:xray" 例子:

filter:xray 这个是兼容的。

CSS语法

基本语法。一个样式 style 的语法由三部分构成 selector 中文叫选择器有点怪怪的,就用英文吧 属性 property 属性值 value selector 举个例子,下面的 p就是selector,color就是属性,blue就是属性值。p html中所有的tag都可以作为selecto...

CSS语法

基本语法。一个样式 style 的语法由三部分构成 selector 中文叫选择器有点怪怪的,就用英文吧 属性 property 属性值 value selector 举个例子,下面的 p就是selector,color就是属性,blue就是属性值。p html中所有的tag都可以作为selecto...

CSS语法

未来不是固定在那里等你趋近的,而是要靠你创造。可能有人会问,css还有语法?是的,它不属于任何编程语言类型,但它有自己规定的格式以及规范,只有了解这些规范你才能写出更简洁 易懂的css。网页设计师们应力求写出的css有更好的可读性,更规范的书写,更小的体积,这是初学者们应该要明白的。css 语法由三...