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=频率,
相关文档:
css
clearfix(针对火狐height:auto无效解决方案)
Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。
例:
<div style=" border:2px solid #0CC; width:600px;" >
<div style="
wi ......
//css样式的书写
//元素ID
#tb1{width:100%;height:80px;background-color:#FFD700;padding:4px;font-family:verdana,tahoma;font-weight:bold;}
#tb2{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px
0px 0px 0px;background-color:#EEEEEE;font-weight:bold;}
//类
.test{cursor:hand;
&nb ......
display Property Values
ValueDescription
none
The element will generate no box at all
block
The element will generate a block box (a line break before and after the element)
inline
The element will generate an inline box (no line break before or after the element). This is default
inline-blo ......
静态定位:position:static(为position属性的默认值)。
动态定位:position:relative或position:absolute或position:fixed。
祖元素:任意包含该元素的元素。 父元素:直接包含该元素的祖元素。 同辈元素:拥有共同的父元素的元素。
注:这些概
念为作者 ......
自己总结的心得:
1:在css设计中,当图片不够宽时,这时可以考虑使用背景颜色(与该图片相似的颜色)来补充。
2,在css设计中,可以使用图片的背景色向网页的背景色过渡
如图:
具体参照《精通JavaScript+Jquery》3-20.html ......