鲨鱼网
DIV样式中几个特殊效果实现
创始人
2024-07-13 11:31:02
0次

本文和大家重点讨论一下DIV样式中一些特殊效果的实现，比如cursor:它可以设置DIV上光标的样式，clip:可以设置剪辑矩形，而DIV样式filter:可以实现滤镜效果，相信本文介绍一定会让你有所收获。

DIV样式中一些特殊效果

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

2、clip:设置剪辑矩形。

例：

Code

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

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

    3、filter:此DIV样式可以实现滤镜效果。

    例：

    Code 

    1.  
    3. filter:alpha(opacity=50);opacity:0.5;  
    4. float:left;width:200px;height:200px;"> 
     
  • height:200px;float:left;"> 
  •  
  •  
  •  

    •  说明：设置透明度: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. #paneldivdiv  
    3. {}{  
    4. background-Color:yellow;  
    5. height:200px;  
    6. width:200px;  
    7. }  
    8.  
    9.  
    11. background-color:Blue;"> 
    13. startx=10,starty=10,FinishX=100,FinishY=100);opacity:0.5;"> 
    14. alpha效果:
       
     
  •  
  •  
  • blur效果：
     
  • add为1代表字有阴影，0代表字全部模糊。  
  • abcdefghijklmnopqrstuvwxyz  
  •  
  • onclick="this.style.backgroundColor='#ff0000'"  
  • ondblclick="this.style.backgroundColor='black';"> 
  • chroma效果：
     
  • 原为黄色，单击变成红色变成透明，双击变成黑色。  
  •  
  •  
  • fliph效果：
     
  • ABCDEFGH
     
  • IJKLMNOP
     
  • 此属性在设置宽高后有效  
  •  
  •  
  • flipv效果：
     
  • ABCDEFGH
     
  • IJKLMNOP
     
  • 此属性在设置宽高后有效  
  •  
  •  
  • gray效果：
     
  • abcdefghijklmn  
  •  
  •  
  • invert效果：
     
  • 背景色变成相反颜色，如黑变成白。  
  •  
  • lightstrength=20,phase=3,strength=10)"> 
  • wave效果：
     
  • Add：一般为1，或0。(0表示上下波浪)  
  • 　　Freq：变形值。(指定多少个波浪)  
  • 　　LightStrength：变形百分比。(变形后的阴影。)  
  • 　　Phase：角度变形百分比。(弯曲的角度)Strength：变形强度。  
  • (数值越大，DIV变形就越大。)  
  •  
  •  
  • xray效果：
     
  • sfasdfasdfasdfsadf  
  •  
  • (GradientType=0,StartColorStr='#B5CCFA',EndColorStr='#ffffff');"> 
  • progid:dximagetransform.microsoft.gradient效果：
     
  • endendendendendendendendendend  
  •  
  •  
  • Positive='1');width:200px;height:200px;"> 
  • dropshadow效果：
     
  • 此效果只有在不设置背景色时有效，这时Color指定的将成为背景色。  
  • 此时背上的字将是清晰的。positive为0时color将成为背景色，  
  • 为1时color只是文本投影的颜色。  
  •  
  • width:100px;height:100px;"> 
  • glow效果：
     
  • strength的光的强度0--100；此时不能设DIV的背景色。  
  •  
  • height:100px;text-transform:uppercase;color:black;"> 
  • mask效果：
     
  • 没有明显效果,不能设背景色。  
  •  
  • width:100px;height:100px;"> 
  • shadow效果：
     
  • abcdefghijklmn  
  •  
  • background-color:red;"> 
  • xray效果：
     
  • sfasdfasdfasdfsadf  
  •  
  • (GradientType=100,StartColorStr='#B5CCFA',EndColorStr='#ffffff');  
  • width:100px;height:100px;"> 
  • 渐变效果。  
  • endendendendendendendendendend  
  •  
  • Microsoft.Pixelate(maxsquare=5);  
  • width:100px;height:100px;"> 
  • lsksalsslalalalalalalal  
  •  
  • width:100px;height:100px;background-color:Yellow;"> 
  •  

    • 【编辑推荐】

    1. DIV样式中一些特殊效果用法举例
    2. DIV样式中常用属性用法指导
    3. CSS中border和clear两大属性用法揭秘
    4. 实现DIV居中布局三种途径
    5. 解读DIV CSS网页布局中CSS无效十个原因

     

     

    上一篇：GSM无线网络优化设置详解

    下一篇：Oracle零售规划解决方案实现计划和执行的整合

    相关内容

    热门资讯

    如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下，MySQL服务器仅侦听来自localhos...
    如何利用交换机和端口设置来管理... 在网络管理中，总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
    施耐德电气数据中心整体解决方案... 近日，全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”，作为该活动的...
    Windows恶意软件20年“... 在Windows的早期年代，病毒游走于系统之间，偶尔删除文件（但被删除的文件几乎都是可恢复的），并弹...
    20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
    规避非法攻击 用好路由器远程管... 单位在市区不同位置设立了科技服务点，每一个服务点的员工都通过宽带路由器进行共享上网，和单位网络保持联...
    范例解读VB.NET获取环境变... VB.NET编程语言的使用范围非常广泛，可以帮助开发人员处理各种程序中的需求，而且还能对移动设备进行...
    2009 IBM动态架构新动力...
    通过 XML 进行内容发布
    德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站，直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...