CSS过滤器
1.alpha属性:
alpha属性用来设置透明度。
Filter: alpha (opacity=opacity, finishopacity=finishopacity,style=style,startX=startX,startY=startY,finishX=finishX,finishY=finishY)
opacity表示透明度等级(0~100)
finishopacity用来设置结束明的透明度
startX和startY表示渐变透明效果的开始坐标
finishX和finishY表示渐变透明效果的开始坐标
2.blur属性
blur属性用来设置模糊效果。
filter: blur(add=true、flase,direction,strength=strength)
add指定图片是否变成模糊效果
direction参数用来设置模糊的方向(0、45、90、135、180、225、270、315)
strength代表有多少像素的宽度将受到模糊影响(默认是5)
3.chroma属性
chroma属性设置一个对象中指定的颜色为透明色。
filter: chroma(color=color)
4.dropshadow属性
dropshadow属性用来添加对象的阴影效果。
filter: dropShadow(Color=color,Offx=offx,Offy=offy,Positive=positive)
Color表示投射阴影的颜色
Offx、Offy分别表示在X方向和Y方向阴影的偏移量(整数表示,正数X轴的右方向和Y轴的向上方向)
Positive:true表示为任何非透明像素建立可见的投影,false表示为透明的像素部分建立可见的投影
5.flipH、flipV属性
flipH表示水平翻转,flipV表示垂直翻转。
filter: flipH
filter: flipV
6.glow属性
glow属性让对象的边缘产生类似发光的效果。
filter: glow(Color=color,Strength=strength)
Color用来指定发光的颜色
Strength用来指定发光的强度(1~225)
7.gray属性
gray属性把一张图变成灰度图。
filter: gray
8.invert属性
invert属性可以把对象的可视化属性全部翻转,包括色彩、饱和度和亮度。
filter: invert
9.mask属性
mask属性为对象建立一个覆盖于表面的蒙版效果。
filter: mask(Color=颜色)
10.shadow属性
shadow属性可以在指定的方向建立物体的投影。
filter: shadow(Color=color,Direction=direction)
Color参数指定投影的颜色
Direction参数指定投影的方向
11.wave属性
wave属性用来设置波纹效果。
filter: wave(Add=True、False,Freq=频率,
相关文档:
最近作规范,得到公司高手的赐教,在制作静态页面中,经常遇到几个div的浮动问题,因为IE不同版本处理浮动会现两倍差距的问题(IE6,IE7),以前都是通过hack技术处理,(如 margin-left:10px,[*margin-left:5px;],_margin-left:5px;这是IE的问题),现在有一个方法:在第一个div的class加上(disp ......
test.html:
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="c.css" mce_href="c.css" />
</head>
<body>
<div id="footer2">
this is a footer2 div
</div>
<p id=&qu ......
css
clearfix(针对火狐height:auto无效解决方案)
Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。
例:
<div style=" border:2px solid #0CC; width:600px;" >
<div style="
wi ......
Css中的条件样式表
<!--[if lte IE 6 ]>
<link rel="stylesheet" href="ie6.css" mce_href="ie6.css" media="all"
type="text/css"/>
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" mce_href="ie7.css" media="all"
type="text/css"/>
<![en ......
margin-bottom:40px; /*ff的属性*/
margin-bottom:140px\9; /* IE6/7/8的属性 */
color:red\0; /* IE8支持 */
*margin-bottom:450px; /*IE6/7的属性*/ ......