CSS滤镜示范(filter)附源代码(静态滤镜)


            
 
 
 
 
filter(css滤镜) 
 
body { 
    margin: 0px; 
    padding: 0px; 
} 

table { 
    font-size: 12px; 
    border: 1px solid #0000FF; 
} 

tr,td { 
    padding: 0px; 
    border: 1px solid #0000FF; 
} 

 
 



 
 

 
filter视觉滤镜的种类 
 
 
     
        Alpha(透明度) 
        Blur(模糊) 
        Chroma(指定颜色透明) 
        DropShadow(不透明阴影) 
        FlipH&FlipV(翻转) 
        Glow(边缘光晕) 
        Gray(去色) 
        Invert(底片效果) 
        Mask(遮照效果) 
        filter:Shadow(影子) 
        Wave(波浪) 
        Xray(轮廓加亮) 
     
     
         
         
         
         
         
         
         
         
         
         
         
         
     
 

 
Alpha: 
 
 
     
        原始图片 
        开始透明度(opacity):100
结束透明度(finishopacity):0
开始位置(startX,startY):(0,0)
结束位置(finishX,finishY):(50,50) 
        开始透明度(opacity):70
结束透明度(finishopacity):20
开始位置(startX,startY):(0,0)
结束位置(finishX,finishY):(50,50) 
     
     
         
         
         
     
 

 
Blur: 
 
 
     
        原始图片 
        显示原来的图片，且以270度的方向模糊20px 
        不显示原来的图片，且以90度方向模糊20px 
     
     
         
         
         
     
 

 
Chroma 
 
 
     
        原始图片 
        Chroma指定的字体颜色(我是CCHXP)变为透明 
     
     
         
         
     
 

 
DropShadow 
 
 
     
        原始图片 
        设置阴影颜色为淡绿色，往右移5px，往下移5px，且阴影呈不透明的效果。 
        设置阴影颜色为粉红色，往左移5px，往上移5px，且阴影呈不透明的效果。 
     
     
         
         
         
     
 

 
FlipH&FlipV 
 
 
     
        原始图片 
        设置图片水平翻转FlipH 
        设置图片垂直翻转FlipV 
     
     
         
         
         
     
 

 
Glow 
 
 
     
        原始图片 
        设置图片光晕颜色为黄色，强度为10 
        设置图片光晕颜色为红色，强度为20 
     
     
         
         
         
     
 
 
Gray 
 
 
     
        原始图片 
        将图片的颜色去除，以达到灰色效果 
     
     
         
         
     
 
 
Invert 
 
 
     
        原始图片 
        设置图片颜色呈底片效果 
     
     
         
         
     
 
 
Mask 
 
 
     
        原始图片 
        设置图片的屏蔽颜色为蓝色 
     
     
         
         
     
 
 
Shadow 
 
 
     
        原始图片 
        设置图片阴影颜色为绿色，往225度方向 
        设置图片阴影颜色为红色，往135度方向 
     
     
         
         
         
     
 
 
Wave 
 
 
     
        原始图片 
        不显示原始图片，有5个振幅为20象素的波浪，其光的强度为30，波浪其始位置为50 
        显示原始图片，有3个振幅为50象素的波浪，其光的强度为50，波浪起始位置为100 
     
     
         
         
         
     
 
 
Xray 
 
 
     
        原始图片 
        X光照片的效果 
     
     
         
         
     
 
 
Gray&Invert&Xray比较 
 
 
     
        原始图片 
        Gray效果 
        Invert效果 
        Xray效果 
     
     
         
         
         
         
     
 
 

 

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]