css设置div只显示某一边的边框

html-css08

css设置div只显示某一边的边框,第1张

在网页设计中经常用到css来设计各种边框样式以及颜色等,有时候需要一个p只显示一个边框,那么你可能会用到下面的一些方法。

一、CSS border-width 属性

border-width是实现显示边框的重要属性。用法如下:

border-width:top right bottom left

参数说明:

top:上边框属性,可以设置像素,也可以设置样式,意思为上边框的宽度。

right:右边框属性,可以设置像素,也可以设置样式,意思为上边框的宽度。

bottom:下边框属性,可以设置像素,也可以设置样式,意思为上边框的宽度。

left:左边框属性,可以设置像素,也可以设置样式,意思为上边框的宽度。

其中像素如:10px 20px等

内置样式有:

thin:定义细的边框;

medium:默认值,定义中等边框;

thick:定义粗的边框;

inherit:继承父元素的边框宽度。

二、CSS border-style 属性

border-style是用来设置边框线样式的,语法如下:

border-style:样式

其中可设置的样式有:

none 定义无边框。

hidden 与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。

dotted 定义点状边框。在大多数浏览器中呈现为实线。

dashed 定义虚线。在大多数浏览器中呈现为实线。

solid 定义实线。

double 定义双线。双线的宽度等于 border-width 的值。

groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。

ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。

inset 定义 3D inset 边框。其效果取决于 border-color 的值。

outset 定义 3D outset 边框。其效果取决于 border-color 的值。

inherit 规定应该从父元素继承边框样式。

三、实例应用

只要定义边框不为0,即可显示边框(但是需要定义边框线样式),如果想要只显示下边框就相当于把top、right、left设置为0px;下边框不为0即可。

实例如下:

只显示下边框

显示如下:

如果想要只显示右边框只需要改border-width属性为 0 1px 0 0即可。

请把问题讲得清楚一些,你说的表框是模块的边框还是表格的边框

如果是模块边框的话,就先弄懂这些参数和属性:

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 }

希望能帮到你 属性名称

字体属性(Font)

font-family

font-style

font-variant

font-weight

font-size

颜色和背景属性

Color

Background-color

Background-image

Background-repeat

Background-attachment

Background-position

文本属性

Word-spacing

Letter-spacing

Text-decoration

Vertical-align

Text-transform

Text-align

Text-indent

Line-height

边距属性

Margin-top

Margin-right

Margin-bottom

Margin-left

填充距属性

Padding-top

Padding-right

Padding-bottom

Padding-left

边框属性

Border-top-width

Border-right-width

Border-bottom-width

Border-left-width

Border-width

Border-color

Border-style

Border-top

Border-right

Border-bottom

Border-left

Width

Height

Float

Clear

分级属性

Display

White-space

List-style-type

List-style-image

List-style-position

List-style

鼠标(Cursor)属性属性含义

使用什么字体

字体是否斜体

是否用小体大写

字体的粗细

字体的大小

定义前景色

定义背景色

定义背景图案

重复方式

设置滚动

初始位置

单词之间的间距

字母之间的间距

文字的装饰样式

垂直方向的位置

文本转换

对齐方式

首行的缩进方式

文本的行高

顶端边距

右侧边距

底端边距

左侧边距

顶端填充距

右侧填充距

底端填充距

左侧填充距

顶端边框宽度

右侧边框宽度

底端边框宽度

左侧边框宽度

一次定义宽度

设置边框颜色

设置边框样式

一次定义顶端

一次定义右侧

一次定义底端

一次定义左侧

定义宽度属性

定义高度属性

文字环绕

哪一边环绕

定义是否显示

怎样处理空白

加项目编号

加图案

第二行起始位置

一次定义列表

自动

定位“十”字

默认指针

手形

移动

箭头朝右方

箭头朝右上方

箭头朝左上方

箭头朝上方

箭头朝右下方

箭头朝左下方

箭头朝下方

箭头朝左方

文本“I”形

等待

帮助

属性值

所有的字体

Normal、italic、oblique

Normal、small-caps

Normal、bold、bolder、lithter等

Absolute-size、relative-size、length、percentage等

颜色

颜色

路径

Repeat-x、repeat-y、no-repeat

Scroll、Fixed

Percentage、length、top、left、

right、bottom等

Normal <length>

同上

None|underline|overline|line-

through|blink

Baseline|sub|super|top|text-top|middle|bottom|text-bottom|

Capitalize|uppercase|

lowercase|none

Left|right|center|justify

<length>|<percentage>

Normal|<number>|<length>|

<percentage>

Length|percentage|auto

同上

同上

同上

Length|percentage

同上

同上

同上

Thin|medium|thick|length

同上

同上

同上

同上

Color

None|dotted|dash|solid等

Border-top-width|color等

同上

同上

同上

Length|percentage|auto

Length|auto

Left|right|none

Left|right|none|both

Block、inline、list-item、none

Normal、pre、nowrap

Disc、circle、square等

<url>|none

Inside、outside

<keyword>|<position>|<url>

Auto

Crosshair

Default

Hand

Move

e-resize

Ne-resize

Nw-resize

n-resize

Se-resize

Sw-resize

s-resize

w-resize

Text

Wait

Help