CSS 滤镜（IE浏览器专属其他浏览器不支持）
Filter 属性介绍：
设置或检索对象所应用的滤镜或滤镜集合。此属性仅作用于有布局的对象，如块对象。内联要素要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute，或者设定 display 属性为 block。请参阅对象的 hasLayout 属性。若要在img 对象上应用 shadow 滤镜，可以在该对象 img 对象的父容器上应用。滤镜的机制是可扩展的。通过利用 Microsoft® DirectX® Media SDK，你可以使用 C++开发和使用第三方滤镜。该属性在 MAC 平台上不可用。对应的脚本特性为 filter。
Alpha 滤镜的使用：
属性 值 说明
opacity 0-100(100是原来的亮度) 对象的亮度
style 1,2,3（取值就这三个） 滤镜的样式
两个属性可以一起用，用逗号分隔
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS 滤镜</title> <style type="text/css"> div{ background-color:#FC3; width:200px; height:100px; filter:Alpha(style=3); } img{ filter:Alpha(style=3); } </style> </head> <body> <div>PHP100.COM中文网</div> <img src="../../../素材库/m_1266887233273.jpg"/> </body> </html>
跨浏览器将一个元素设置成透明
filter:alpha(opacity=70); -moz-opacity:0.7; opacity: 0.7;
Blur 滤镜的使用
属性 值 说明
add true/false 是否印象派
direction 0-360 角度
strength 数字 模糊度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS 滤镜</title> <style type="text/css"> div{ background-color:#FC3; width:200px; height:100px; filter:Alpha(style=3); } img{ filter:blur(add=true,strength=30); } </style> </head> <body> <div>PHP100.COM中文网</div> <img src="../../../素材库/m_1266887233273.jpg"/> </body> </html>
Fliph、Flipv滤镜：没有属性
Filph：垂直翻转 Flipv：水平翻转
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS 滤镜</title> <style type="text/css"> div{ background-color:#FC3; width:200px; height:100px; filter:Fliph(); } img{ filter:Flipv()Fliph(); } </style> </head> <body> <div>PHP100.COM中文网</div> <img src="../../../素材库/m_1266887233273.jpg"/> </body> </html>
DropShadow 滤镜（投影）
属性 值 说明
color 颜色 阴影颜色
offx 数字 x 坐标偏移
offy 数字 y 坐标偏移
positive true/false 是否建立透明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS 滤镜</title> <style type="text/css"> div{ width:200px; height:100px; filter:DropShadow(color=#0F0,offx=30,offy=40); } img{ } </style> </head> <body> <div>PHP100.COM中文网</div> <img src="../../../素材库/m_1266887233273.jpg"/> </body> </html>
Glow 滤镜
属性 值 说明
color 颜色 发光颜色
strength 数字 发光厚度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS 滤镜</title> <style type="text/css"> div{ padding:30px; width:200px; height:100px; filter:glow(color=#0F0,strength=50); } img{ } </style> </head> <body> <div>PHP100.COM中文网</div> <img src="../../../素材库/m_1266887233273.jpg"/> </body> </html>
Gray ,Invert,Xray 滤镜：无属性
Gray ：黑白照 Invert：照片反光 Xray： x—射线
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS 滤镜</title> <style type="text/css"> div{ background-color:#CF0; padding:30px; width:200px; height:100px; } img{ filter:invert(); } </style> </head> <body> <div>PHP100.COM中文网</div> <img src="../../../素材库/m_1266887233273.jpg"/> </body> </html>
Shadow 滤镜（阴影）
属性 值 说明
color 颜色 阴影颜色
direction 0-360 阴影方向
strength 数字 厚度
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>CSS 滤镜</title> 6 <style type="text/css"> 7 div{ 8 filter:shadow(color=red,direction=135); 9 padding:30px; 10 width:200px; 11 height:100px; 12 13 } 14 img{ 15 16 } 17 </style> 18 </head> 19 <body> 20 <div>PHP100.COM中文网</div> 21 <img src="../../../素材库/m_1266887233273.jpg"/> 22 </body> 23 </html>