Guff_9hys

这个屌丝很懒，什么也没留下！

热门标签

DIV样式总结(二)

作者：Guff_9hys | 2024-06-28 21:56:11

踩

startx=0, starty=0, finishx=100, finishy=100

二、一些特殊效果：

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

2、clip: 设置剪辑矩形。

例：

< div style ="font:16px 宋体;width:600px;height:200px; cursor:help; clip:rect(0px 100px 20px 0px); line-height:20px; overflow:auto;background-color:Yellow;position:absolute" >

div样式测式how areyou.

</ div >

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

3、filter: 滤镜效果。

例：

< div style ="width:450px;height:200px;background-color:Blue;" >

< div id =”tdiv” style ="background-color:Yellow; filter:alpha(opacity=50);opacity:0.5;

float:left; width:200px;height:200px;" >

</ div >

< div style ="background-color:Yellow; width:200px;height:200px;float:left;" >

</ 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)';

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

例：

< style type ="text/css" >

#paneldiv div

{

background-Color : yellow ;

height : 200px ;

width : 200px ;

}

</ style >

< div id ="paneldiv" style ="width:230px;height:2300px;

background-color:Blue;" >

< div style ="filter:alpha(opacity=0,finishopacity=80,style=1,

startx=10,starty=10,FinishX=100, FinishY=100);opacity:0.5;" >

alpha效果: < br />

</ div >

< div style ="filter:blur(add=1,direction=100,strength=5);" >

blur效果： < br />

add为1代表字有阴影，0代表字全部模糊。

abcdefghijklmnopqrstuvwxyz

</ div >

< div style ="filter:chroma(color='#ff0000')" onclick ="this.style.backgroundColor='#ff0000'" ondblclick ="this.style.backgroundColor='black';" >

chroma效果： < br />

原为黄色，单击变成红色变成透明，双击变成黑色。

</ div >

< div style ="filter:FlipH;" >

fliph效果： < br />

ABCDEFGH < br />

IJKLMNOP < br />

此属性在设置宽高后有效

</ div >

< div style ="filter:FlipV;" >

flipv效果： < br />

ABCDEFGH < br />

IJKLMNOP < br />

此属性在设置宽高后有效

</ div >

< div style ="filter:gray;" >

gray效果： < br />

abcdefghijklmn

</ div >

< div style ="filter:invert; text-transform:uppercase;color:Red;" >

invert效果： < br />

背景色变成相反颜色，如黑变成白。

</ div >

< div style ="filter:wave(add=0,freq=3,lightstrength=20,phase=3,strength=10)" >

wave效果： < br />

Add：一般为1，或0。(0表示上下波浪)

　　 Freq：变形值。(指定多少个波浪)

　　 LightStrength：变形百分比。(变形后的阴影。)

　　 Phase：角度变形百分比。(弯曲的角度) Strength：变形强度。(数值越大，DIV变形就越大。)

</ div >

< div style ="filter:Xray" >

xray效果： < br />

sfasdfasdfasdfsadf

</ div >

< div style ="filter: progid:DXImageTransform.Microsoft.Gradient

(GradientType=0, StartColorStr='#B5CCFA', EndColorStr='#ffffff');" >

progid:dximagetransform.microsoft.gradient效果： < br />

endendendendendendendendendend

</ div >

< div style ="filter:DropShadow(color='#666666',OffX='3',OffY='3',

Positive='1');width:200px;height:200px;" >

dropshadow效果： < br />

此效果只有在不设置背景色时有效，这时Color指定的将成为背景色。此时背上的字将是清晰的。positive为0时color将成为背景色，为1时color只是文本投影的颜色。

</ div >

< div style ="filter:Glow(color='#0000ff',strength='3');

width:100px;height:100px;" >

glow效果： < br />

strength的光的强度0--100；此时不能设DIV的背景色。

</ div >

< div style ="filter:mask(color='ff0000'); width:100px;

height:100px;text-transform:uppercase;color:black; " >

mask效果： < br />

没有明显效果,不能设背景色。

</ div >

< div style ="filter:shadow(color='0000ff',direction='100');

width:100px;height:100px;" >

shadow效果： < br />

abcdefghijklmn

</ div >

< div style ="filter:Xray;width:100px;height:100px;

background-color:red;" >

xray效果： < br />

sfasdfasdfasdfsadf

</ div >

< div style ="filter: progid:DXImageTransform.Microsoft.Gradient

(GradientType=100, StartColorStr='#B5CCFA', EndColorStr='#ffffff');width:100px;height:100px;" >

渐变效果。

endendendendendendendendendend

</ div >

< div style ="filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=5);width:100px;height:100px;" >

lsksalsslalalalalalalal

</ div >

< div style ="filter:alpha(opacity=100, finishOpacity=0,style=2);

width:100px; height:100px;background-color:Yellow;" >

</ div >

此上滤镜效果主要参考：

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

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

(转自: http://www.cnblogs.com/skylaugh/archive/2009/05/09/1453124.html)

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Guff_9hys/article/detail/767417