DHTML初步·Cascading Style Sheets·BORDER Property -- 追寻梦想＞编程乐园

您的位置：寻梦网首页＞编程乐园＞CSS 初步＞Cascading Style Sheets Index

Style Sheets

BORDER PROPERTY:
BORDER-BOTTOM
BORDER-BOTTOM-WIDTH
BORDER-COLOR
BORDER-LEFT
BORDER-LEFT-WIDTH
BORDER-RIGHT
BORDER-RIGHT-WIDTH
BORDER-STYLE
BORDER-TOP
BORDER-TOP-WIDTH
BORDER-WIDTH
BORDER

{ BORDER-BOTTOM : BORDER-BOTTOM-WIDTH &| BORDER-STYLE &| COLOR }

Inherited: No

The BORDER-BOTTOM property allows you to declare for the bottom border the BORDER-BOTTOM-WIDTH, and/or the BORDER-STYLE, and/or the COLOR properties in only one declaration. The COLOR value uses the same values as discussed in BORDER-COLOR.

Code:
Selector {BORDER-BOTTOM: THICK DASHED YELLOW}
Selector {BORDER-BOTTOM: THICK DOUBLE YELLOW}
Selector {BORDER-BOTTOM: DOTTED GRAY}

{ BORDER-BOTTOM-WIDTH : THIN | MEDIUM | THICK | LENGTH }

Inherited: No

The BORDER-BOTTOM-WIDTH property sets the width of the bottom border.

THIN | MEDIUM | THICK

The keyword values of THIN, MEDIUM, or THICK can be used to set the width of the border line. The exact thickness of the border created by using these keyword values will be determined by your computer/browser combination.

LENGTH

The LENGTH value can be in any of the following seven units. Use the abbreviation.

Length	Abbrev.
centimeters	CM
ems	EM
inches	IN
millimeters	MM
picas	PC
pixels	PX
points	PT

Code:
Selector {BORDER-BOTTOM-WIDTH: THICK}
Selector {BORDER-BOTTOM-WIDTH: 0.25IN}
Selector {BORDER-BOTTOM-WIDTH: 5MM}

{ BORDER-COLOR : COLOR }

Inherited: No

The BORDER-COLOR property allows you to set the color of the border.

You can declare one, two, three or four colors:

If you declare one color, all four borders will be that color.

If you declare two colors, the top and bottom borders will be the first color, the right and left borders will be the second color.

If you declare three colors, the top border will be the first, the right border the second, and the bottom and left borders the third color.

If you declare four colors, the order is top, right, bottom, left.

COLOR

The COLOR value can be either the keyword color name, the hex six-digit number (#FFFFFF), or the RGB three-digit value (255,255,255). There are sixteen standard colors in HTML:

AQUA	NAVY
BLACK	OLIVE
BLUE	PURPLE
FUCHSIA	RED
GRAY	SILVER
GREEN	TEAL
LIME	WHITE
MAROON	YELLOW

Code:
Selector {BORDER-COLOR: RGB(201, 94, 177)}
Selector {BORDER-COLOR: #E95A2B}
Selector {BORDER-COLOR: SILVER}
Selector {BORDER-COLOR: SILVER RED}
Selector {BORDER-COLOR: SILVER RED RGB(223, 94, 77)}
Selector {BORDER-COLOR: SILVER RED RGB(223, 94, 77) BLACK}

{ BORDER-LEFT : BORDER-LEFT-WIDTH &| BORDER-STYLE &| COLOR }

Inherited: No

The BORDER-LEFT property allows you to declare for the left border the BORDER-LEFT-WIDTH, and/or the BORDER-STYLE, and/or the COLOR properties in only one declaration. The COLOR value uses the same values as discussed in BORDER-COLOR.

Code:
Selector {BORDER-LEFT: THICK DASHED YELLOW}
Selector {BORDER-LEFT: THICK DOUBLE YELLOW}
Selector {BORDER-LEFT: DOTTED GRAY}

{ BORDER-LEFT-WIDTH : THIN | MEDIUM | THICK | LENGTH }

Inherited: No

The BORDER-LEFT-WIDTH property sets the width of the left border.

THIN | MEDIUM | THICK

LENGTH

The LENGTH value can be in any of the following seven units. Use the abbreviation.

Length	Abbrev.
centimeters	CM
ems	EM
inches	IN
millimeters	MM
picas	PC
pixels	PX
points	PT

Code:
Selector {BORDER-LEFT-WIDTH: THICK}
Selector {BORDER-LEFT-WIDTH: 0.25IN}
Selector {BORDER-LEFT-WIDTH: 5MM}

{ BORDER-RIGHT : BORDER-RIGHT-WIDTH &| BORDER-STYLE &| COLOR }

Inherited: No

The BORDER-RIGHT property allows you to declare for the right border the BORDER-RIGHT-WIDTH, and/or the BORDER-STYLE, and/or the COLOR properties in only one declaration. The COLOR value uses the same values as discussed in BORDER-COLOR.

Code:
Selector {BORDER-RIGHT: THICK DASHED YELLOW}
Selector {BORDER-RIGHT: THICK DOUBLE YELLOW}
Selector {BORDER-RIGHT: DOTTED GRAY}

{ BORDER-RIGHT-WIDTH : THIN | MEDIUM | THICK | LENGTH }

Inherited: No

The BORDER-RIGHT-WIDTH property sets the width of the right border.

THIN | MEDIUM | THICK

LENGTH

The LENGTH value can be in any of the following seven units. Use the abbreviation.

Length	Abbrev.
centimeters	CM
ems	EM
inches	IN
millimeters	MM
picas	PC
pixels	PX
points	PT

Code:
Selector {BORDER-RIGHT-WIDTH: THICK}
Selector {BORDER-RIGHT-WIDTH: 0.25IN}
Selector {BORDER-RIGHT-WIDTH: 5MM}

{ BORDER-STYLE : NONE | DOTTED | DASHED | SOLID | DOUBLE | GROOVE | RIDGE | INSET | OUTSET }

Inherited: No

The BORDER-STYLE property allows you to select the same line style for all four borders. The BORDER-STYLE property is also used in BORDER-LEFT, BORDER-RIGHT, and BORDER-TOP.

You can declare one, two, three or four styles:

If you declare one style, all four borders will be that style.

If you declare two styles, the top and bottom borders will be the first style, the right and left borders will be the second style.

If you declare three styles, the top border will be the first, the right border the second, and the bottom and left borders the third style.

If you declare four styles, the order is top, right, bottom, left.

NONE

The NONE value is the default. If no style is declared, no border will appear even if other border properties have been set. By declaring NONE, you can ensure that any previous declaration will not effect the four borders.

DOTTED

A dotted line appears on the background. This border style is not recognized by many browsers.

DASHED

A dashed line appears on the background. This border style is not recognized by many browsers.

SOLID

A solid line appears on the background.

DOUBLE

A double solid line appears on the background which has a total width equal to BORDER-WIDTH.

GROOVE

A 3-D grooved line appears on the background. The exact appearance depends on the selected COLOR value.

RIDGE

A 3-D ridged line appears on the background. The exact appearance depends on the selected COLOR value.

INSET

A 3-D inset line appears on the background. The exact appearance depends on the selected COLOR value.

OUTSET

A 3-D outset line appears on the background. The exact appearance depends on the selected COLOR value.

Code:
Selector {BORDER-STYLE: DOUBLE}
Selector {BORDER-STYLE: DOUBLE GROOVE}
Selector {BORDER-STYLE: DOUBLE GROOVE DASHED}
Selector {BORDER-STYLE: DOUBLE GROOVE NONE SOLID}

{ BORDER-TOP : BORDER-TOP-WIDTH &| BORDER-STYLE &| COLOR }

Inherited: No

The BORDER-TOP property allows you to declare for the top border the BORDER-TOP-WIDTH, and/or the BORDER-STYLE, and/or the COLOR properties in only one declaration. The COLOR value uses the same values as discussed in BORDER-COLOR.

Code:
Selector {BORDER-TOP: THICK DASHED YELLOW}
Selector {BORDER-TOP: THICK DOUBLE GREEN}
Selector {BORDER-TOP: DOTTED GRAY}

{ BORDER-TOP-WIDTH : THIN | MEDIUM | THICK | LENGTH }

Inherited: No

The BORDER-TOP-WIDTH property sets the width of the top border.

THIN | MEDIUM | THICK

LENGTH

The LENGTH value can be in any of the following seven units. Use the abbreviation.

Length	Abbrev.
centimeters	CM
ems	EM
inches	IN
millimeters	MM
picas	PC
pixels	PX
points	PT

Code:
Selector {BORDER-TOP-WIDTH: THICK}
Selector {BORDER-TOP-WIDTH: 0.25IN}
Selector {BORDER-TOP-WIDTH: 5MM}

{ BORDER-WIDTH : THIN | MEDIUM | THICK | LENGTH }

Inherited: No

The BORDER-WIDTH property allows you to set the width of all four borders with only one declaration.

You can declare one, two, three or four widths:

If you declare one width, all four borders will be that width.

If you declare two widths, the top and bottom borders will be the first width, the right and left borders will be the second width.

If you declare three widths, the top border will be the first, the right border the second, and the bottom and left borders the third width.

If you declare four widths, the order is top, right, bottom, left.

THIN | MEDIUM | THICK

LENGTH

The LENGTH value can be in any of the following seven units. Use the abbreviation.

Length	Abbrev.
centimeters	CM
ems	EM
inches	IN
millimeters	MM
picas	PC
pixels	PX
points	PT

Code:
Selector {BORDER-WIDTH: THICK}
Selector {BORDER-WIDTH: 0.25IN}
Selector {BORDER-WIDTH: 5MM}

( BORDER : BORDER-WIDTH &| BORDER-STYLE &| COLOR }

Inherited: No

The BORDER property allows you to declare the BORDER-WIDTH, and/or the BORDER-STYLE, and/or the COLOR properties in only one declaration. The COLOR value uses the same values as discussed in BORDER-COLOR.

Code:
Selector {BORDER: THICK DASHED YELLOW}
Selector {BORDER: THICK DOUBLE YELLOW}
Selector {BORDER: DOTTED GRAY}