DIV样式中一些特殊效果用法举例

开发 前端
本文向大家介绍一下DIV样式中一些特殊效果,主要包括cursor,clip和filter三部分内容,另外介绍了一下滤镜综合的例子,希望对你有所帮助。

上节我们介绍了DIV样式中的常用属性,那么你对DIV样式的特殊效果是否了解,这里和大家简单分享一下,相信本文介绍一定会让你有所收获。

DIV样式中一些特殊效果:

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

2、clip:设置剪辑矩形。

例:

Code
 

  1. <divstyledivstyle="font:16px宋体;width:600px;height:200px;cursor:help;  
  2. clip:rect(0px100px20px0px);line-height:20px;overflow:auto;background-color:Yellow;position:absolute"> 
  3. div样式测式howareyou.  
  4. </div> 

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

3、DIV样式特殊效果之filter:滤镜效果。

例:

Code
 

  1. <divstyledivstyle="width:450px;height:200px;background-color:Blue;"> 
  2. <dividdivid=”tdiv”style="background-color:Yellow;filter:alpha(opacity=50);opacity:0.5;  
  3. float:left;width:200px;height:200px;"> 
  4. </div> 
  5. <divstyledivstyle="background-color:Yellow;width:200px;height:200px;float:left;"> 
  6. </div> 
  7. </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)';#p#

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

例:

滤镜综合例子

  1. <styletypestyletype="text/css"> 
  2. #paneldivdiv  
  3. {}{  
  4. background-Color:yellow;  
  5. height:200px;  
  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=10,FinishX=100,FinishY=100);opacity:0.5;"> 
  14.  

◆DIV样式特殊效果之alpha效果

  1. :<br/> 
  2. </div> 
  3.  
  4. <divstyledivstyle="filter:blur(add=1,direction=100,strength=5);"> 
  5.  

◆DIV样式特殊效果之blur效果

  1. <br/> 
  2. add为1代表字有阴影,0代表字全部模糊。  
  3. abcdefghijklmnopqrstuvwxyz  
  4. </div> 
  5. <divstyledivstyle="filter:chroma(color='#ff0000')  
  6. "onclick="this.style.backgroundColor='#ff0000' 
  7. "ondblclick="this.style.backgroundColor='black';"> 

◆DIV样式特殊效果之chroma效果

  1. <br/> 
  2. 原为黄色,单击变成红色变成透明,双击变成黑色。  
  3. </div> 
  4. <divstyledivstyle="filter:FlipH;"> 

◆DIV样式特殊效果之fliph效果

  1. <br/> 
  2. ABCDEFGH<br/> 
  3. IJKLMNOP<br/> 
  4. 此属性在设置宽高后有效  
  5. </div> 
  6. <divstyledivstyle="filter:FlipV;"> 

◆DIV样式特殊效果之flipv效果

  1. <br/> 
  2. ABCDEFGH<br/> 
  3. IJKLMNOP<br/> 
  4. 此属性在设置宽高后有效  
  5. </div> 
  6. <divstyledivstyle="filter:gray;"> 

#p#◆DIV样式特殊效果之gray效果

  1. <br/> 
  2. abcdefghijklmn  
  3. </div> 
  4. <divstyledivstyle="filter:invert;text-transform:uppercase;color:Red;"> 

◆DIV样式特殊效果之invert效果

  1. <br/> 
  2. 背景色变成相反颜色,如黑变成白。  
  3. </div> 
  4. <divstyledivstyle="filter:wave(add=0,freq=3,lightstrength=20,phase=3,strength=10)"> 

◆DIV样式特殊效果之wave效果

  1. <br/> 
  2. Add:一般为1,或0。(0表示上下波浪)  
  3.   Freq:变形值。(指定多少个波浪)  
  4.   LightStrength:变形百分比。(变形后的阴影。)  
  5.   Phase:角度变形百分比。(弯曲的角度)Strength:变形强度。(数值越大,DIV变形就越大。)  
  6. </div> 
  7. <divstyledivstyle="filter:Xray"> 

◆DIV样式特殊效果之xray效果

  1. <br/> 
  2. sfasdfasdfasdfsadf  
  3. </div> 
  4. <divstyledivstyle="filter:progid:DXImageTransform.Microsoft.Gradient  
  5. (GradientType=0,StartColorStr='#B5CCFA',EndColorStr='#ffffff');"> 
  6. progid:dximagetransform.microsoft.gradient效果:<br/> 
  7. endendendendendendendendendend  
  8. </div> 
  9. </div> 
  10. <divstyledivstyle="filter:DropShadow(color='#666666',OffX='3',OffY='3',  
  11. Positive='1');width:200px;height:200px;"> 

◆DIV样式特殊效果之dropshadow效果

  1. <br/> 
  2. 此效果只有在不设置背景色时有效,这时Color指定的将成为背景色。  
  3.  
  4. 此时背上的字将是清晰的。positive为0时color将成为背景色,为1时color只是文本投影的颜色。  
  5. </div> 
  6. <divstyledivstyle="filter:Glow(color='#0000ff',strength='3');  
  7. width:100px;height:100px;"> 
  8.  

#p#◆DIV样式特殊效果之glow效果

  1. <br/> 
  2. strength的光的强度0--100;此时不能设DIV的背景色。  
  3. </div> 
  4. <divstyledivstyle="filter:mask(color='ff0000');width:100px;  
  5. height:100px;text-transform:uppercase;color:black;"> 

◆DIV样式特殊效果之mask效果

  1. <br/> 
  2. 没有明显效果,不能设背景色。  
  3. </div> 
  4. <divstyledivstyle="filter:shadow(color='0000ff',direction='100');  
  5. width:100px;height:100px;"> 

◆DIV样式特殊效果之shadow效果

  1. <br/> 
  2. abcdefghijklmn  
  3. </div> 
  4. <divstyledivstyle="filter:Xray;width:100px;height:100px;  
  5. background-color:red;"> 

◆DIV样式特殊效果之xray效果

  1. <br/> 
  2. sfasdfasdfasdfsadf  
  3. </div> 
  4. <divstyledivstyle="filter:progid:DXImageTransform.Microsoft.Gradient  
  5. (GradientType=100,StartColorStr='#B5CCFA',EndColorStr='#ffffff');width:100px;height:100px;"> 
  6. 渐变效果。  
  7. endendendendendendendendendend  
  8. </div> 
  9. <divstyledivstyle="filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=5);width:100px;height:100px;"> 
  10. lsksalsslalalalalalalal  
  11. </div> 
  12. <divstyledivstyle="filter:alpha(opacity=100,finishOpacity=0,style=2);  
  13. width:100px;height:100px;background-color:Yellow;"> 
  14. </div> 

此上滤镜效果主要参考:

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

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

【编辑推荐】

  1. DIV样式中常用属性用法指导
  2. 使用Div CSS构架的三大好处
  3. 解析DIV布局之四大属性用法
  4. Div+CSS布局入门之写入整体层结构与CSS
  5. DIV+CSS开发过程中影响SEO的制作细节

 

责任编辑:佚名 来源: cnblogs.com
相关推荐

2010-09-10 09:57:27

DIV样式

2010-08-24 14:10:44

div style

2009-12-29 14:26:04

WPF按钮

2015-07-08 16:19:17

iOSUIVisualEff

2009-12-25 14:25:39

WPF图标

2011-07-19 13:49:19

Objective-C 数据类型

2011-07-19 18:11:09

iPhone 开发

2022-05-24 12:50:58

Pandas索引代码

2017-05-23 14:33:46

简历求职前端开发

2013-03-29 09:03:59

iOS实用小代码iOS开发

2009-09-21 17:46:25

Hibernate数据

2012-12-24 14:51:02

iOS

2011-06-16 14:28:08

Qt Symbian 文件

2011-03-16 10:40:42

JavaEEJ2EE

2023-11-13 07:54:54

.NET Core开源框架

2019-10-15 06:00:26

Google AnalAngularReact

2014-08-08 09:14:43

Linux浏览器

2018-09-11 16:15:36

Vue高版本前端

2014-03-19 15:41:21

编程语言编程规则

2011-06-24 14:46:23

Qt
点赞
收藏

51CTO技术栈公众号