成都网站建设设计

将想法与焦点和您一起共享

解析DIVstyle中特殊效果的实现

本文向大家描述一下DIV style一些特殊效果,主要包括cursor:设置DIV上光标的样式,filter:滤镜效果以及其他效果。

成都创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都做网站、成都网站建设、成都外贸网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的乌拉特前网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

DIV style一些特殊效果

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

2、clip:设置剪辑矩形。

例:

代码

 
 
 
  1. cursor:help;clip:rect(0px100px20px0px);
  2. line-height:20px;overflow:auto;
  3. background-color:Yellow;position:absolute">div样式测式howareyou.
  • 说明:clip:rect(toprightbottomleft);设置上下左右的距离,但此时要把position指定为absolute。看以上效果。

    3、filter:滤镜效果。

    例:

    代码

     
     
     
    1. background-color:Blue;">
    2. filter:alpha(opacity=50);opacity:0.5;float:left;width:200px;
    3. height:200px;">
  • width: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)';

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

    例:

     
     
     
    1. #paneldivdiv
    2. {
    3. background-Color:yellow;
    4. height:200px;
    5. width:200px;
    6. }
    7. background-color:Blue;">
    8. startx=10,starty=10,FinishX=100,FinishY=100);
    9. opacity:0.5;">
    10. chroma效果:
    11. 原为黄色,单击变成红色变成透明,双击变成黑色。
  • glow效果:
  • strength的光的强度0--100;此时不能设DIV的背景色。
  • height:100px;text-transform:uppercase;color:black;">
  • mask效果:
  • 没有明显效果,不能设背景色。
  • width:100px;height:100px;">
  •  

  • 网站名称:解析DIVstyle中特殊效果的实现
    文章源于:https://chengdu.cdxwcx.cn/article/cdoohcd.html

    其他资讯