郑欣宜歌声:div style常用属性大全（二）

来源：百度文库编辑：中财网时间：2024/04/29 07:13:56

div style常用属性大全（二）2011年08月15日星期一上午 10:10

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的背景样式。

例：

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的不同组合。也可以以用坐标

指定具体的位置。

例：

2
3

二、一些特殊效果：

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

此属性在设置宽高后有效

郑欣宜歌声:div style常用属性大全 （二）

郑欣宜歌声:div style常用属性大全（二）