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

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

 
 
 
  
  
  
 
  
  
  
  
  
  
filter:alpha(opacity=50);opacity:0.5;  
  
  
  
float:left;width:200px;height:200px;"> 
  
  
  

 说明：设置透明度: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#

例：

滤镜综合例子

 
 
 
  
  
  
 
  
  
  
#paneldivdiv  
  
  
  
{}{  
  
  
  
background-Color:yellow;  
  
  
  
height:200px;  
  
  
  
width:200px;  
  
  
  
}  
  
  
  
 
  
  
  
 
  
  
  
  
  
  
background-color:Blue;"> 
  
  
  
  
  
  
startx=10,starty=10,FinishX=100,FinishY=100);opacity:0.5;"> 
  
  
  
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无效十个原因

文章名称：DIV样式中几个特殊效果实现
网页链接：http://www.shufengxianlan.com/qtweb/news12/386712.html

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

广告

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