经济学的就业方向:div style常用属性大全 (二)
来源:百度文库 编辑:偶看新闻 时间:2024/04/28 20:50:03
33、border:设置DIV的边框样式。
例:
说明:border后跟边框的样式、宽度、颜色等属性。还可以用以下属性分别设置。
34、border-width:设置边框的宽度。
35、border-color:设置边框的颜色。
36、border-style:设置边框的样式。
例:
代码 1
2
3
28
29
30
31
说明:border是对四个边框同时进行设置。也可以单独对某一边或几个边进行设置,此时用以下属性:
border-top:设置上边框样式。
37、border-bottom:设置下边框样式。
38、border-left:设置左边框样式。
39、border-right:设置右边框样式。
说明:某一边框的某一样式也可单独设置,以上边框为例可以用:border-top-style、border-top-width、border-top-color来分别设置,由于使用各border相同,所以不在举例说明。
40、display:设置显示属性。其值有block、none。
41、float:设置DIV在页面上的流向,其值有left(靠左显示)、right(靠右显示)、none。
50、background:设置DIV的背景样式。
例:
1
4
5
6
7
说明:background后可直接跟背景的颜色、背景图片、平铺方式等样式。也可以用以下属性分别设置。
51、background-color:设置背景颜色。
52、background-attachment:背景图像的附加方式,其值有scroll、fixed。
53、background-image:指定使有的背景图片。
54、background-repeat:背景图象的平铺方式。其值有no-repeat(不平铺)、repeat(两个方向平铺)、
repeat-x(水平方向平铺)、repeat-y(垂直方向平铺)。
55、background-position:在DIV中定位背景位置。其值有top bottom left right的不同组合。也可以以用坐标
指定具体的位置。
例:
1
2
3
4
二、一些特殊效果:
1、cursor:设置DIV上光标的样式。
2、clip:设置剪辑矩形。
例:
代码
div样式测式how areyou.
说明:clip:rect(top right bottom left);设置上下左右的距离,但此时要把position指定为absolute。看以上效果。
3、filter:滤镜效果。
例:
代码
说明:设置透明度: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)';
* 以下是滤镜综合的例子,将以下代码复制到一个网页文件中就可看到其效果,所以就不要加以说明了。
例:
#paneldiv div
{
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
chroma效果:
原为黄色,单击变成红色变成透明,双击变成黑色。
fliph效果:
ABCDEFGH
IJKLMNOP
此属性在设置宽高后有效
flipv效果:
ABCDEFGH
IJKLMNOP
此属性在设置宽高后有效
gray效果:
abcdefghijklmn
invert效果:
背景色变成相反颜色,如黑变成白。
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
lsksalsslalalalalalalal
width:100px; height:100px;background-color:Yellow;">