DIV式样总结(二)

DIV样式总结(二)

二、一些特殊效果：

1、cursor:设置DIV上光标的样式。

2、clip:设置剪辑矩形。

例：

<div?style="font:16px?宋体;width:600px;height:200px;?cursor:help;?clip:rect(0px?100px?20px?0px);?line-height:20px;?overflow:auto;background-color:Yellow;position:absolute">
div样式测式how?areyou.
</div>

说明：clip:rect(top right bottom left);设置上下左右的距离,但此时要把position指定为absolute。看以上效果。

3、filter:滤镜效果。

例：

<div?style="width:450px;height:200px;background-color:Blue;">
?????<div?id=”tdiv”?style="background-color:Yellow;?filter:alpha(opacity=50);opacity:0.5;
float:left;?width:200px;height:200px;"?>
?????</div>
?????<div?style="background-color:Yellow;?width:200px;height:200px;float:left;">
?????</div>
</div>

说明：设置透明度:opacity：value (FF专用,value的取值为0至1之间的小数)，filter:alpha(opacity=value)(IE专用，value取值：0至100)。

如果要有JavaScript改变DIV的透明度可用下面的方法：

FF中：document.getElementById('tdiv').style.opacity='0.9';

IE中：document.getElementById('tdiv').style.filter='alpha(opacity=90)';

?

*?以下是滤镜综合的例子，将以下代码复制到一个网页文件中就可看到其效果，所以就不要加以说明了。

例：

?

<style?type="text/css">
???????#paneldiv?div
???????{
??????????background-Color:yellow;
??????????height:200px;
??????????width:200px;
???????}
</style>

<div?id="paneldiv"?style="width:230px;height:2300px;
background-color:Blue;">
????<div?style="filter:alpha(opacity=0,finishopacity=80,style=1,
startx=10,starty=10,FinishX=100,?FinishY=100);opacity:0.5;">
?????alpha效果:<br?/>
????</div>

????<div?style="filter:blur(add=1,direction=100,strength=5);">
??????????????blur效果：<br?/>
??????????????add为1代表字有阴影，0代表字全部模糊。
??????????????abcdefghijklmnopqrstuvwxyz
????</div>
????<div?style="filter:chroma(color='#ff0000')"?onclick="this.style.backgroundColor='#ff0000'"?ondblclick="this.style.backgroundColor='black';">
???????chroma效果：<br?/>
???????原为黄色，单击变成红色变成透明，双击变成黑色。
????</div>
????<div?style="filter:FlipH;">
??????????????fliph效果：<br?/>
??????????????ABCDEFGH<br?/>
??????????????IJKLMNOP<br?/>
??????????????此属性在设置宽高后有效
????</div>
????<div?style="filter:FlipV;">
??????????????flipv效果：<br?/>
??????????????ABCDEFGH<br?/>
??????????????IJKLMNOP<br?/>
??????????????此属性在设置宽高后有效
????</div>
????<div?style="filter:gray;">
?????????gray效果：<br?/>
?????????abcdefghijklmn
????</div>
????<div?style="filter:invert;?text-transform:uppercase;color:Red;">
???????????????invert效果：<br?/>
???????????????背景色变成相反颜色，如黑变成白。
????</div>
????<div?style="filter:wave(add=0,freq=3,lightstrength=20,phase=3,strength=10)">
???????????????wave效果：<br?/>
???????????????Add：一般为1，或0。(0表示上下波浪)?
　　???????????Freq：变形值。(指定多少个波浪)
　　???????????LightStrength：变形百分比。(变形后的阴影。)
　　???????????Phase：角度变形百分比。(弯曲的角度)??Strength：变形强度。(数值越大，DIV变形就越大。)
????</div>
????<div?style="filter:Xray">
?????????xray效果：<br?/>
?????????sfasdfasdfasdfsadf
????</div>
<div?style="filter:?progid:DXImageTransform.Microsoft.Gradient
(GradientType=0,?StartColorStr='#B5CCFA',?EndColorStr='#ffffff');">
???????progid:dximagetransform.microsoft.gradient效果：<br?/>
???????endendendendendendendendendend
????</div>
</div>
<div?style="filter:DropShadow(color='#666666',OffX='3',OffY='3',
Positive='1');width:200px;height:200px;">
?????????dropshadow效果：<br?/>
?????????此效果只有在不设置背景色时有效，这时Color指定的将成为背景色。此时背上的字将是清晰的。positive为0时color将成为背景色，为1时color只是文本投影的颜色。
????</div>
<div?style="filter:Glow(color='#0000ff',strength='3');
width:100px;height:100px;">
?????????glow效果：<br?/>
?????????strength的光的强度0--100；此时不能设DIV的背景色。
????</div>
<div?style="filter:mask(color='ff0000');?width:100px;
height:100px;text-transform:uppercase;color:black;?">
???????????mask效果：<br?/>
???????????没有明显效果,不能设背景色。
???</div>
???<div?style="filter:shadow(color='0000ff',direction='100');
width:100px;height:100px;">
???????????????shadow效果：<br?/>
???????????????abcdefghijklmn
???</div>
???<div?style="filter:Xray;width:100px;height:100px;
background-color:red;">
???????xray效果：<br?/>
??????sfasdfasdfasdfsadf
???</div>
???<div?style="filter:?progid:DXImageTransform.Microsoft.Gradient
(GradientType=100,?StartColorStr='#B5CCFA',?EndColorStr='#ffffff');width:100px;height:100px;">
????????渐变效果。
????????endendendendendendendendendend
??</div>
??<div?style="filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=5);width:100px;height:100px;">
???????????????lsksalsslalalalalalalal
?</div>
?<div?style="filter:alpha(opacity=100,?finishOpacity=0,style=2);
width:100px;?height:100px;background-color:Yellow;">
</div>

?

此上滤镜效果主要参考：

http://www.lao8.org/html/8/2008-1-21/2008121182204.html

http://ce.sysu.edu.cn/hope/Education/ShowArticle.asp?ArticleID=2117；

(转自: http://www.cnblogs.com/skylaugh/archive/2009/05/09/1453124.html)

查看更多 下一篇