边框【网页设计-最新经典技术文档】CSS语法手册(三)文本填充,边框,边界和位置属性(一)

CSS语法手册三文本填充边框边界和位置属性一

一、框填充属性

1 、 p adding-bottomp adding-leftp adding-topp adding-ri ght

功能毎个容器都有边框这些属性设置边框与框內元素间的距离。

数值

长度-设置相对或绝对值。 在数字后指定度量单位如下 mm,cm, in,p t,p x,p c,ex,em。 em和e x设置产生相对于父字体的字体尺寸。

百分比-以父元素的百分比设置边框。

说明填充值不能使用负值但可以是小数。

例子

2 、 p adding

功能是个简写属性用于设置上下左右各个方向边框和内容元素的间距。数值 同前。

说明用单一值可以让毎边等距填充如果用两个值则第一个值用于上下填充第二个值用于左右填充如果用三个值则赋于上边填充左右填充和下边填充如果用四个值则分别用于上右下左填充。可以混合数值类型。

例子

二、框边框属性

1 、 border-topborder-bottomborder-ri ghtborder-left

功能这四个属性都是简写属性分别设置上下右左的边框属性。缺省情况下边框没有样式设置。

数值共有三个边框属性border-width: 取值为thin,medium, thick 或指定长度。border-style: 设置用于修饰边框的底纹。 可以设置下列样式 none,dotted,doshed,solid,double,groove,r id ge, inset,out s et 。border-color: 设置边框颜色。

例子

2 、 border-top-widthborder-bottom-widthborder-ri ght=widthborder-left-width

功能分别设置各个边框的厚度。

数值thin- 细边框。medium- 中等线宽。thick- 粗线。

长度-用相对或绝对单位设置边框宽度。

例子

3 、 border-width

功能简写属性可同时设置四个边框的宽度。

数值thin- 细边框。medium- 中等线宽。thick- 粗线。

长度-用相对或绝对单位设置边框宽度。

说明见p adding 说明。

例子

4 、 border-color

功能简写属性设置四个边框的颜色值。

数值可以用颜色名或 RGB值。如果指定单个颜色则四个边框都显示为这个颜色如果指定两个颜色 则顺序为上下左右 如果指定三种颜色 则顺序为上左右下如果指定四种颜色则顺序为上右下左。

说明颜色名如下aqua,black,blue,fu chs ia,gray,gr een, l ime,maroon,navy,olive,p urp le,red, silver, teal,white,y ellow

对于RGB值可用三种方法指定

#rrggbb;rgb(r,g,b);rgb(r%,g%,b%)

例子

5 、 border-sty le

功能用于显示边框和指定边框样式。

数值none- 不显示边框为缺省值dotted- 点线dashed- 虛线s olid- 实线double- 双线groove-3D 陷入线ridge-3 D 山脊狀线in s et - 使页面有沉入感out s et - 使页面有浮出感

说明并非所有浏览器都能显示 ridge, ins et, out s et 之类的样式有些浏览器将所有边框都绘制成实线。

6 、 b order

功能简写属性设置所有边框属性。

数值border-width- 取值thin,medium, thick 或指定长度。

border-sty le- 取值none,dotted,dashed, solid,double,groove,rid ge, inset,out s etborder-color- 可用颜色名或 RGB值。

说明与其它简写属性不同的是每个设置只能取一个值这个属性均匀作用于框的各边。

例子

This Is A Example