DIV样式中几个特殊效果实现

1、你对DIV样式中的一些特殊效果是否熟悉，这里向大家简单描述一下，主要包括cursor:设置DIV上光标的样式，clip:设置剪辑矩形以及filter:滤镜效果等，相信你一定会对本文介绍感兴趣。本文和大家重点讨论一下DIV样式中一些特殊效果的实现，比如cursor:它可以设置DIV上光标的样式，clip:可以设置剪辑矩形，而DIV样式filter:可以实现滤镜效果，相信本文介绍一定会让你有所收获。DIV样式中一些特殊效果1、cursor:设置DIV上光标的样式。2、clip:设置剪辑矩形。例：Code1. <div style="font:16px宋体;width:600px;h

2、eight:200px;  2. cursor:help;clip:rect(0px100px20px0px;line-height:20px;  3. overflow:auto;background-color:Yellow;position:absolute"> 4. div样式测式howareyou.  5.   6.  说明：clip:rect(toprightbottomleft;设置上下左右的距离,但此时要把position指定为absolute。看以上效果。3、filter:此DIV样式可以实现滤镜效果

3、。例：Code 7. <divstyledivstyle="width:450px;height:200px;background-color:Blue;"> 8. <dividdivid=”tdiv”style="background-color:Yellow;  9. filter:alpha(opacity=50;opacity:0.5;  10. float:left;width:200px;height:200px;"> 11.  12. <divstyl

4、edivstyle="background-color:Yellow;width:200px;  13. height:200px;float:left;"> 14.   15.  16.  说明：设置透明度:opacity：value(FF专用,value的取值为0至1之间的小数，filter:alpha(opacity=value(IE专用，value取值：0至100。如果要有JavaScript改变DIV样式的透明度可用下面的方法：FF中：document.getElementById('tdiv'

5、;.style.opacity='0.9'IE中：document.getElementById('tdiv'.style.filter='alpha(opacity=90'*以下是滤镜综合的例子，将以下代码复制到一个网页文件中就可看到其效果，所以就不要加以说明了。例：滤镜综合例子1. <styletypestyletype="text/css"> 2. #paneldivdiv  3.  4. background-Color:yellow;  5. height:200p

6、x;  6. width:200px;  7.  8. style> 9.  10. <dividdivid="paneldiv"style="width:230px;height:2300px;  11. background-color:Blue;"> 12. <divstyledivstyle="filter:alpha(opacity=0,finishopacity=80,style=1,  13. startx=10,starty=

7、10,FinishX=100,FinishY=100;opacity:0.5;"> 14. alpha效果:<br/> 15. div> 16.  17. <divstyledivstyle="filter:blur(add=1,direction=100,strength=5;"> 18. blur效果：<br/> 19. add为1代表字有阴影，0代表字全部模糊。  20. abcdefghijklmnopqrstuvwxyz  21

8、. div> 22. <divstyledivstyle="filter:chroma(color='#ff0000'"23. onclick="this.style.backgroundColor='#ff0000'"  24. ondblclick="this.style.backgroundColor='black'"> 25. chroma效果：<br/> 26. 原为黄色，单击变成红色变成透明，双击变成黑色。

9、  27. div> 28. <divstyledivstyle="filter:FlipH;"> 29. fliph效果：<br/> 30. ABCDEFGH<br/> 31. IJKLMNOP<br/> 32. 此属性在设置宽高后有效  33. div> 34. <divstyledivstyle="filter:FlipV;"> 35. flipv效果：<br/> 3

10、6. ABCDEFGH<br/> 37. IJKLMNOP<br/> 38. 此属性在设置宽高后有效  39. div> 40. <divstyledivstyle="filter:gray;"> 41. gray效果：<br/> 42. abcdefghijklmn  43. div> 44. <divstyledivstyle="filter:invert;text-transform:uppercase;color

11、:Red;"> 45. invert效果：<br/> 46. 背景色变成相反颜色，如黑变成白。  47. div> 48. <divstyledivstyle="filter:wave(add=0,freq=3,  49. lightstrength=20,phase=3,strength=10"> 50. wave效果：<br/> 51. Add：一般为1，或0。(0表示上下波浪  52. Freq：变形值。(指定多少个波浪  

12、;53. LightStrength：变形百分比。(变形后的阴影。  54. Phase：角度变形百分比。(弯曲的角度Strength：变形强度。  55. (数值越大，DIV变形就越大。  56. div> 57. <divstyledivstyle="filter:Xray"> 58. xray效果：<br/> 59. sfasdfasdfasdfsadf  60. div> 61. <divstyledivstyle="filter:pr

13、ogid:DXImageTransform.Microsoft.Gradient  62. (GradientType=0,StartColorStr='#B5CCFA',EndColorStr='#ffffff'"> 63. progid:dximagetransform.microsoft.gradient效果：<br/> 64. endendendendendendendendendend  65. div> 66. div> 67. <divstyl

14、edivstyle="filter:DropShadow(color='#666666',OffX='3',OffY='3',  68. Positive='1'width:200px;height:200px;"> 69. dropshadow效果：<br/> 70. 此效果只有在不设置背景色时有效，这时Color指定的将成为背景色。  71. 此时背上的字将是清晰的。positive为0时color将成为背景色，  72. 为1时color

15、只是文本投影的颜色。  73. div> 74. <divstyledivstyle="filter:Glow(color='#0000ff',strength='3'  75. width:100px;height:100px;"> 76. glow效果：<br/> 77. strength的光的强度0-100；此时不能设DIV的背景色。  78. div> 79. <divstyledivstyle="filter:m

16、ask(color='ff0000'width:100px;  80. height:100px;text-transform:uppercase;color:black;"> 81. mask效果：<br/> 82. 没有明显效果,不能设背景色。  83. div> 84. <divstyledivstyle="filter:shadow(color='0000ff',direction='100'  85. width:100px;h

17、eight:100px;"> 86. shadow效果：<br/> 87. abcdefghijklmn  88. div> 89. <divstyledivstyle="filter:Xray;width:100px;height:100px;  90. background-color:red;"> 91. xray效果：<br/> 92. sfasdfasdfasdfsadf  93. div> 94. <di

18、vstyledivstyle="filter:progid:DXImageTransform.Microsoft.Gradient  95. (GradientType=100,StartColorStr='#B5CCFA',EndColorStr='#ffffff'  96. width:100px;height:100px;"> 97. 渐变效果。  98. endendendendendendendendendend  99. div> 100. <divstyledivstyle="filter:progid:dXImageTransform.101. Microsoft.Pixelate(maxsqu