PLM 的系列知识,从低级到高级,从学习到实践

文章 - 8 评论 - 6 收藏 - 0 粉丝 - 4 访问量 - 17190

适用浏览器

IE。 不符合CSS 标准


定于语法:

filter:filtername{parameters};


分类:

基本滤镜--可直接作用在对象上,并立即生效,主要有:

1).alpha--通道

2).blur--模糊

3)MotionBlur--移动模糊

4)Chroma--透明色

5)Drop Shadow--下落阴影

6)Flip--对称变换

7)Glow--光晕

8)GrayScale--灰度

9)Invert--反色

10)Mask--遮罩

11)Shadow--阴影

12)X-ray--X光效果

13)Emboss or Engrave--浮雕

14)Wave--波浪


高级滤镜--需配合JS等脚本使用,产生更绚丽的变幻效果 ,主要有

1)BlendTrans -- 渐隐变换

2)RevealTrans--变换

3)Light --灯光


alphafilter:alpha(opacity=opacity,finishopacity=finishopacity,startX=startX,
startY=startY,finishX=finishX,finishY=finishY);
opacity: 透明度等级, 取值 0-100(0完全透明)
style: 透明区域的形状特征,取值 0,1,2,3
   0-统一形状 1-线性 2--圆形放射渐变  3--矩形放射渐变
X,Y这种的为坐标参数了

blurfilter:progid:DXImageTransform.Microsoft.Blur(makeshadow=makeshadow,pi
xelradius=pixelradius,shadowopacity=shadowopacity);
makeshadow设置对象的内容是否被处理为阴影,
pixelradius设置模糊效果的作用深度。
shadowopacity设置使用makeshadow制作成的阴影
的透明度

例子:
filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false);



MotionBlurfilter:porgid:DXImageTransform.Microsoft.MotionBlur(add=add,direc
tion=direction,strength=strength);
add:指定是否叠加原图片。
  取值 true, false
direction: 设置模糊的方向。0表示垂直向上。默认向左270
strength: 有多少像素的宽度受到模糊的影响

例子:
filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30,direction=90,add=true);        /* 水平向右 */



Chromafilter:chroma(color:color)color:希望透明的颜色值
例子:
filter:chroma(color=FF6800);        /* 去掉金黄色 */



Dropshadowfilter:dropshadow(color=color,offx=offx,offy=offy,positive=positive);color:投射阴影的颜色
offx和offy分别表示x方向和y方向阴影的偏移量。
positive:
  true--任何非透明像素建立可见的投影
  false--透明的像素部分建立可见的投影
例子:
.drop1{
    filter:dropshadow(color=#ffb6aa,offx=6,offy=4,positive=true);
}
.drop2{
    filter:dropshadow(color=#FFAAAA,offx=6,offy=4,positive=false);
}



flip
filter:fliph
filter:fiipv
fliph:水平翻转
flipv:竖直翻转
例子:
.flip2{
    filter:flipv;    /* 竖直翻转 */
}
.flip3{
    filter:flipv fliph;    /* 水平、竖直同时翻转 */
}



Glowfilter:Glow(color=color,strength=strength);color: 发光的颜色
strength: 发光的强度。(1-255)
例子:
    filter:glow(color=#FFFF99,strength=6);    /* 发黄色光 */



Grayfilter:gray;
filter:gray;    /* 黑白图片 */




Invertfilter:invert
例子:
    filter:invert;    /* 底片效果 */




Maskfilter:mask(color=color);color:指定使用什么颜色作为掩膜
例子:
filter:mask(color=#8888FF);    /* 遮罩效果 */



Shadowfilter:shadow(color=color,direction=direction);color: 设置阴影的颜色
direction: 设置阴影的方向
例子:
.shadow{
    filter:shadow(color=#CCCCFF,direction=135);    /* 阴影效果 */
}
.drop{
    filter:dropshadow(color=#CCCCFF,offx=5,offy=5,positive=true);
    /* 下落阴影 */
}




X射线filter:xray;
例子:
.xray{
    filter:xray;    /* X光效果 */
}
.gray{
    filter:gray;    /* 黑白效果 */
}



Emboss,Engravefilter:progid:DXImageTransform.Microsoft.emboss(enabled=enabled,bias=bias);
filter:progid:DXImageTransform.Microsoft.emboss(enabled=enabled,bias=bias);
enabled: 滤镜的开启与关闭
   true,false
bias: 设置添加到滤镜结果的每种颜色成分值的百分比,
 -1 - 1
例子:
.emboss{
    filter:progid:DXImageTransform.microsoft.emboss(bias=0.4);
}
.engrave{
    filter:progid:DXImageTransform.microsoft.engrave(bias=0.4);
}



wave
filter:wave(add=add,freq=freq,lightstrenght=lightsrength,phase=phase,strength=strength);add:
  1 -显示原对象
  0--不显示原对象
freq:
  生成波纹的频率
lightsrength: 生成波纹增强光的效果
phase:正弦波开始的偏移量
例子:
span.wave1{   
    filter:wave(add=0,freq=2,lightstrength=70,phase=75,strength=4);
}
span.wave2{   
    filter:wave(add=0,freq=4,lightstrength=20,phase=25,strength=5);
}
span.wave3{   
    filter:wave(add=1,freq=4,lightstrength=60,phase=0,strength=6);
}






发表于: 2011-09-24 17:33 阅读(1383) 评论(0) 收藏 好文推荐

本博客所有内容,若无特殊声明,皆为博主原创作品,未经博主授权,任何人不得复制、转载、摘编等任何方式进行使用和传播。

作者该类其他博文:

发表评论(网友发言只代表个人观点,不代表本网站观点或立场。)

您尚未登录,请先【登录或注册

个人档案

<2021年7月>
27282930123
45678910
11121314151617
18192021222324
25262728293031
1234567

最近来访

加入的俱乐部

留言簿(0)

文章分类

文章档案

相册


最新评论


赞~·&nbsp;--杨仕亮
IC设计公司在产品数据管理方面的需求有哪些特点?和机械行业有哪些不同?
期待后文。--蒲公英的约定
赞~·--传奇
学习了,感谢分享~`--传奇
欢迎欢迎--蔡荣
迎欢开博--月之故乡

阅读排行榜

评论排行榜