元素的边框一般用来分隔页面的各个部分,在CSS中,边框属性可以分为以下几个属性,包括边框样式(border-style),边框宽度(border-width),
边框颜色(border-color)以及边框综合属性(border)等。
顶部边框样式属性:
border-top-style: none | hidden| dotted | dashed | solid | double | groove | ridge | inset | outset
其中各个属性的含义如下所述:
none:没有边框
hidden:隐藏边框
dotted: 边框为点线
dashed:边框为虚线
solid: 边框为实线
double:边框为双线
groove:边框为3d凹槽
ridge:边框为菱形
inset:边框为3d凹边
outset:边框为3d凸边
New Document
效果图如下所示:
当然还有其他的一些属性:border-right-style, border-bottom-style, border-left-style, border-top-color, border-right-color, border-bottom-color,
border-left-color, border-top-width, border-right-width, border-bottom-width, border-left-width, border-style, border-color, border-width,
border-top, border-right, border-bottom,border-left, border
border-top-width: medium | thin | thick | length
border-right-width: medium | thin | thick | length
border-bottom-width: medium | thin | thick | length
border-left-width: medium | thin | thick | length
medium: 默认的边框宽度。
thin: 小于默认的边框宽度。
thick: 大于默认的边框宽度。
length: 长度值。
border-style用来统一定义边框等显示样式,在边框样式属性中,使用的属性值和相应的边框单侧样式属性相同。
border-color用来统一定义边框的显示颜色,在边框颜色属性中使用的属性值为颜色值。
border-width用来统一定义边框的显示宽度,在边框宽度属性中使用的属性值和相应的边框单侧宽度属性相同。
border-top用来统一定义边框顶部的显示效果,border-top:border-top-style border-top-width border-top-color
border-right:border-right-style border-right-width border-right-color
border-bottom: border-bottom-style border-bottom-width border-bottom-color
border-left: border-left-style border-left-width border-left-color
border:border-style border-width border-color