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

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

创新互联建站专业为企业提供齐河网站建设、齐河做网站、齐河网站设计、齐河网站制作等企业网站建设、网页设计与制作、齐河企业网站模板建站服务，十多年齐河做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

DIV样式中一些特殊效果：

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

2、clip:设置剪辑矩形。

例：

Code
 

 
 
 
    
  
  
  
  1. 
  
  
  
  2. clip:rect(0px100px20px0px);line-height:20px;overflow:auto;background-color:Yellow;position:absolute"> 
    3. 
  
  
  
  3. div样式测式howareyou.  
    4.
 

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

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

例：

Code
 

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2. 
  
  
  
  3. float:left;width:200px;height:200px;"> 
    4.
 
  •  
  •  
  •  

    •  说明：设置透明度: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.  
      2. 
  
  
  
    2. #paneldivdiv  
      3. 
  
  
  
    3. {}{  
      4. 
  
  
  
    4. background-Color:yellow;  
      5. 
  
  
  
    5. height:200px;  
      6. 
  
  
  
    6. width:200px;  
      7. 
  
  
  
    7. }  
      8. 
  
  
  
    8.  
      9. 
  
  
  
    9.  
      10. 
  
  
  
    10. 
  
  
  
    11. background-color:Blue;"> 
      12. 
  
  
  
    12. 
  
  
  
    13. startx=10,starty=10,FinishX=100,FinishY=100);opacity:0.5;"> 
      14. 
  
  
  
    14.  
      15.

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

     
 
 
      
  
  
  
    1. :
       
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4.  
      5. 
  
  
  
    5.  
      6.

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

     
 
 
      
  
  
  
    1. ：
       
      2. 
  
  
  
    2. add为1代表字有阴影，0代表字全部模糊。  
      3. 
  
  
  
    3. abcdefghijklmnopqrstuvwxyz  
      4. 
  
  
  
    4.  
      5. 
  
  
  
    5. 
  
  
  
    6. "onclick="this.style.backgroundColor='#ff0000' 
      7. 
  
  
  
    7. "ondblclick="this.style.backgroundColor='black';"> 
      8.

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

     
 
 
      
  
  
  
    1. ：
       
      2. 
  
  
  
    2. 原为黄色，单击变成红色变成透明，双击变成黑色。  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4.  
      5.

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

     
 
 
      
  
  
  
    1. ：
       
      2. 
  
  
  
    2. ABCDEFGH
       
      3. 
  
  
  
    3. IJKLMNOP
       
      4. 
  
  
  
    4. 此属性在设置宽高后有效  
      5. 
  
  
  
    5.  
      6. 
  
  
  
    6.  
      7.

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

     
 
 
      
  
  
  
    1. ：
       
      2. 
  
  
  
    2. ABCDEFGH
       
      3. 
  
  
  
    3. IJKLMNOP
       
      4. 
  
  
  
    4. 此属性在设置宽高后有效  
      5. 
  
  
  
    5.  
      6. 
  
  
  
    6.  
      7.

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

     
 
 
      
  
  
  
    1. ：
       
      2. 
  
  
  
    2. abcdefghijklmn  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4.  
      5.

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

     
 
 
      
  
  
  
    1. ：
       
      2. 
  
  
  
    2. 背景色变成相反颜色，如黑变成白。  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4.  
      5.

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

     
 
 
      
  
  
  

    1.  
      2. 
  
  
  
    2. Add：一般为1，或0。(0表示上下波浪)  
      3. 
  
  
  
    3. 　　Freq：变形值。(指定多少个波浪)  
      4. 
  
  
  
    4. 　　LightStrength：变形百分比。(变形后的阴影。)  
      5. 
  
  
  
    5. 　　Phase：角度变形百分比。(弯曲的角度)Strength：变形强度。(数值越大，DIV变形就越大。)  
      6. 
  
  
  
    6.  
      7. 
  
  
  
    7.  
      8.

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

     
 
 
      
  
  
  

    1.  
      2. 
  
  
  
    2. sfasdfasdfasdfsadf  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4. 
  
  
  
    5. (GradientType=0,StartColorStr='#B5CCFA',EndColorStr='#ffffff');"> 
      6. 
  
  
  
    6. progid:dximagetransform.microsoft.gradient效果：
       
      7. 
  
  
  
    7. endendendendendendendendendend  
      8. 
  
  
  
    8.  
      9. 
  
  
  
    9.  
      10. 
  
  
  
    10. 
  
  
  
    11. Positive='1');width:200px;height:200px;"> 
      12.

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

     
 
 
      
  
  
  

    1.  
      2. 
  
  
  
    2. 此效果只有在不设置背景色时有效，这时Color指定的将成为背景色。  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4. 此时背上的字将是清晰的。positive为0时color将成为背景色，为1时color只是文本投影的颜色。  
      5. 
  
  
  
    5.  
      6. 
  
  
  
    6. 
  
  
  
    7. width:100px;height:100px;"> 
      8. 
  
  
  
    8.  
      9.

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

     
 
 
      
  
  
  

    1.  
      2. 
  
  
  
    2. strength的光的强度0--100；此时不能设DIV的背景色。  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4. 
  
  
  
    5. height:100px;text-transform:uppercase;color:black;"> 
      6.

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

     
 
 
      
  
  
  
    1. ：
       
      2. 
  
  
  
    2. 没有明显效果,不能设背景色。  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4. 
  
  
  
    5. width:100px;height:100px;"> 
      6.

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

     
 
 
      
  
  
  

    1.  
      2. 
  
  
  
    2. abcdefghijklmn  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4. 
  
  
  
    5. background-color:red;"> 
      6.

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

     
 
 
      
  
  
  

    1.  
      2. 
  
  
  
    2. sfasdfasdfasdfsadf  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4. 
  
  
  
    5. (GradientType=100,StartColorStr='#B5CCFA',EndColorStr='#ffffff');width:100px;height:100px;"> 
      6. 
  
  
  
    6. 渐变效果。  
      7. 
  
  
  
    7. endendendendendendendendendend  
      8. 
  
  
  
    8.  
      9. 
  
  
  
    9.  
      10. 
  
  
  
    10. lsksalsslalalalalalalal  
      11. 
  
  
  
    11.  
      12. 
  
  
  
    12. 
  
  
  
    13. width:100px;height:100px;background-color:Yellow;"> 
      14. 
  
  
  
    14.  
      15.

    此上滤镜效果主要参考：

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

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

    文章标题：DIV样式中一些特殊效果用法举例
    文章位置：http://www.shufengxianlan.com/qtweb/news3/241853.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    软件开发知识

    行业网站建设

    鸿艺文化传播　　 　卡多尼人工智　　 　网络营销推广　　 　成都电信服务器托管　　 　营销型网站建设　　 　成都光华电信机房　　 　上海济桢教育　　 　定制网站设计　　 　成都发电机维修　　 　四川黔盛装饰　　 　合江网站建设　　 　成都响应式网站　　 　手机网站制作　　 　全网营销推广　　 　仿古建筑设计　　 　成都网站设计　　 　商城系统开发　　 　宜宾网站建设　　 　重庆水土机房托管　　 　明安消防器材