码迷,mamicode.com
首页 > Web开发 > 详细

CSS 滤镜(IE浏览器专属其他浏览器不支持)

时间:2014-07-18 08:30:30      阅读:321      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   使用   os   

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(取值就这三个)                   滤镜的样式

两个属性可以一起用,用逗号分隔

bubuko.com,布布扣
<!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>
bubuko.com,布布扣

 

Blur 滤镜的使用
属性                                    值                                             说明
add                                     true/false                                  是否印象派
direction                              0-360                                       角度
strength                             数字                                           模糊度

bubuko.com,布布扣
<!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>
bubuko.com,布布扣

 

 

 

Fliph、Flipv滤镜:没有属性

Filph:垂直翻转            Flipv:水平翻转

bubuko.com,布布扣
<!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>
bubuko.com,布布扣

 

 

 

DropShadow 滤镜(投影)
属性                                           值                                                   说明
color                                          颜色                                                 阴影颜色
offx                                           数字                                                 x 坐标偏移
offy                                           数字                                                 y 坐标偏移
positive                                     true/false                                          是否建立透明

bubuko.com,布布扣
<!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>
bubuko.com,布布扣

 

 

 

Glow 滤镜
属性                                   值                                               说明
color                                 颜色                                             发光颜色
strength                           数字                                             发光厚度

bubuko.com,布布扣
<!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>
bubuko.com,布布扣

 

 

 

Gray ,Invert,Xray 滤镜:无属性
Gray :黑白照      Invert:照片反光      Xray: x—射线

bubuko.com,布布扣
<!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>
bubuko.com,布布扣

 

 

 Shadow 滤镜(阴影)
属性                                       值                                                            说明
color                                      颜色                                                          阴影颜色
direction                                 0-360                                                       阴影方向

strength                           数字                                                                厚度

bubuko.com,布布扣
 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>
bubuko.com,布布扣

 

 

 

 



CSS 滤镜(IE浏览器专属其他浏览器不支持),布布扣,bubuko.com

CSS 滤镜(IE浏览器专属其他浏览器不支持)

标签:style   blog   http   color   使用   os   

原文地址:http://www.cnblogs.com/LO-ME/p/3588133.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!