css border属性允许你规定元素边框的样式,宽度和颜色.
css边框:在html中,我们使用表格来创建文本周围的边框,但是 通过使用css边框属性,
我们可以创建出效果出色的边框,并且可以应用于任何元素,
元素外边距内就是元素的边框(border),元素的边框就是围绕元素内容和内边距的一条或多条线.每个边框有3个方面:宽度、样式/以及颜色。
border属性 :在网页中设置元素的边框样式。可同时设置边框宽度、边框样式、边框颜色。也可以单独设置上边、右边、下边、左边的边框。
语法:border: border-width | border-style | border-color
border-width :边框宽度。可以指定长度值。如1px,1em(单位为px,pt,em等)。或者使用关键字medium(默认),thick,thin。
border-top-width:设置元素上边框宽度
border-right-width:设置元素右边框宽度
border-bottom-width:设置元素下边框宽度
border-left-width:设置元素左边框宽度
border-style :边框样式。
border-top-style:设置元素上边框样式
border-right-style:设置元素右边框样式
border-bottom-style:设置元素下边框样式
border-left-style:设置元素左边框样式
属性值有:
none:无边框。
hidden:隐藏边框。对于表,hidden 用于解决边框冲突。
dotted:点状边框。
dashed:虚线边框。
solid:实线边框。
double:双线边框。两条单线与其间隔的和等于指定的border-width值。
groove:3D凹槽边框。
ridge:3D垄状边框。
inset:凹边框。
outset:凸边框。
border-color :边框颜色。
1.1 边框各样式效果图
1.2 四条边颜色样式相同
1.3 四条边颜色不同,样式相同
1.4 四条边颜色相同,样式不同
1.5 设置上边框宽度、样式、颜色
1.6 设置右边框宽度、样式、颜色
1.7 设置下边框宽度、样式、颜色
1.8 设置左边框宽度、样式、颜色
以上对border边框属性进行了基础操作,大家可以根据自己的经验为边框制作出更漂亮的样式。如若大家有什么更好的见解,那就在回复区畅所欲言吧,我定会吸取精华~如有写错欢迎大家回复,我以后定会更加细心 _
分类: 电脑/网络 >>百度 >>百度空间解析:
请把问题讲得清楚一些,你说的表框是模块的边框还是表格的边框
如果是模块边框的话,就先弄懂这些参数和属性:
none (没有边框,无论边框宽度设为多大)
dotted (点线式边框)
dashed (破折线式边框)
solid (直线式边框)
double (双线式边框)
groove (槽线式边框)
ridge(脊线式边框)
inset (内嵌效果的边框)
outset (突起效果的边框)
边框宽度属性(border-width)
这个属性用来设定上下左右边框的宽度,它的值如下:
medium (是缺省值)
thin (比medium细)
thick (比medium粗)
用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。
边框颜色属性(border-color)
这个属性用来设定上下左右边框的颜色。例句如下:
.d5 {border-color:grayborder-style:solid}
边框属性(border)
这个属性是边框属性的一个快捷的综合写法,它包含border-width, border-style和border-color。例句如下:
.d1 {border:5px solid gray}
单边边框属性
上下左右四个边框不但可以统一设定,也可以分开设定。
设定上边框属性,你可以使用border-top, border-top-width, border-top-style, border-top-color。
设定下边框属性,你可以使用border-bottom, border-bottom-width, border-bottom-style, border-bottom-color。
设定左边框属性,你可以使用border-left, border-left-width, border-left-style, border-left-color。
设定上边框属性,你可以使用border-right, border-right-width, border-right-style, border-right-color。
边框属性
前面例子里提到的,例如用来定义字体颜色的color,字体大小的font-size,都是CSS的属性。从这一课起,就开始详细介绍CSS的各类属性。
每一个网页都可以理解成是被一个方框框起来的,而页面中不同的部分又可以分为一个个小的方框。因此定义方框的边距、边界、颜色等的边框属性应用而生。
1、边距属性:
·左边距(margin-left)
·右边距(margin-right)
·上边距(margin-top)
·下边距(margin-bottom)
·边距(margin)
边距属性定义HTML页面中方框四边和其他元素之间的空白距离,每一个margin-side属性只影响到一条边,而margin则提供了一个同时设置四个边距的机会。
2、填充属性:
·左填充(padding-left)
·右填充(padding-right)
·上填充(padding-top)
·下填充(padding-bottom)
·填充(padding)
填充属性设置边框和内部元素的距离。它和边距属性十分相似,每个padding-side定义一个边框距离,padding则同时定义四个距离。
3、边界属性
·上边界宽(border-top-width)
·右边界宽(border-right-width)
·下边界宽(border-bottom-width)
·左边界宽(border-left-width)
·边界宽(border-width
这几个属性定义边界宽度,用thin、medium和thick分别表示细、中等和粗,或者指定具体的数值来定义边界的宽度。
·边界颜色(border-color)
这个属性定义边界的颜色,可以用16种颜色名或RGB值来设置。如果指定一种颜色,则表示四个边框是一种颜色,指定两种颜色,则定义顺序为上下、左右;指定三种颜色,顺序为上、左右、下;指定四种颜色,顺序则为上、右、下、左。16种颜色名分别为:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。RGB值则应表示为#RRGGBB或r%,g%,b%。
·边界样式(border-style)
该属性用以定义边框的风格呈现式样。共有九种。
none - 不显示边框,为缺省值
dotted - 点线
dashed —虚线
solid - 实线
double - 双线
groove -凹线
ridge - 凸线
inset - 使整个方框凸起
outset - 使整个方框凹陷
·上边界(border-top)
·右边界(border-right)
·下边界(border-bottom)
·左边界(border-left)
·边界(border)
这几个是简写属性,它 *** 了上面几种属性的特点,可使用其给边框一次性定义宽度、式样和颜色。各属性值之间用空格隔开。
4、尺寸属性
定义方框的宽度width和高度height。
例:DIV.sample {width: 300px
height: 200px }