CSS語法手冊（三）文字填充，邊框，邊界和位置屬性（一）(轉)[@more@]

文字填充，邊框，邊界和位置屬性（一）

一、框填充屬性

1、padding-bottom

padding-left

padding-top

padding-right

功能：?個容器都有邊框，這些屬性設定邊框與框?元素間的距離。

數值：

長度 - 設定相對或絕對值。在數字後指定度量單位如下：mm, cm, in, pt, px, pc, ex, em。em 和 ex 設定產生相對於父字型的字型尺寸。

百分比 - 以父元素的百分比設定邊框。

說明：填充值不能使用負值，但可以是小數。

例子

2、padding

功能：是個簡寫屬性，用於設定上，下，左，右各個方向邊框和內容元素的間距。

數值：同前。

說明：用單一值可以讓?邊等距填充；如果用兩個值，則第一個值用於上下填充，第二個值用於左右填充；如果用三個值，則賦於上邊填充，左右填充和下邊填充；如果用四個值，則分別用於上，右，下，左填充。可以混合數值型別。

例子

二、框邊框屬性

1、border-top

border-bottom

border-right

border-left

功能：這四個屬性都是簡寫屬性，分別設定上，下，右，左的邊框屬性。預設情況下，邊框沒有樣式設定。

數值：共有三個邊框屬性

border-width: 取值為 thin, medium, thick或指定長度。

border-style: 設定用於修飾邊框的底紋。可以設定下列樣式：none, dotted,doshed, solid, double, groove, ridge, inset, outset。

border-color: 設定邊框顏色。

例子

2、border-top-width

border-bottom-width

border-right=width

border-left-width

功能：分別設定各個邊框的厚度。

數值：

thin - 細邊框。

medium - 中等線寬。

thick - 粗線。

長度 - 用相對或絕對單位設定邊框寬度。

例子

3、border-width

功能：簡寫屬性，可同時設定四個邊框的寬度。

數值：

thin - 細邊框。

medium - 中等線寬。

thick - 粗線。

長度 - 用相對或絕對單位設定邊框寬度。

說明：見 padding 說明。

例子：

邊框屬性

4、border-color

功能：簡寫屬性，設定四個邊框的顏色值。

數值：可以用顏色名或RGB值。如果指定單個顏色，則四個邊框都顯示為這個顏色；如果指定兩個顏色，則順序為上下，左右；如果指定三種顏色，則順序為上，左右，下；如果指定四種顏色，則順序為上，右，下，左。

說明：顏色名如下

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.

對於RGB值，可用三種方法指定

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

例子：

邊框顏色

5、border-style

功能：用於顯示邊框和指定邊框樣式。

數值：

none - 不顯示邊框，為預設值

dotted - 點線

dashed - ?線

solid - 實線

double - 雙線

groove - 3D陷入線

ridge - 3D山脊?線

inset - 使頁面有沉入感

outset - 使頁面有浮出感

說明：並非所有瀏覽器都能顯示ridge, inset, outset 之類的樣式，有些瀏覽器將所有邊框都繪製成實線。

Example1

Example2

6、border

功能：簡寫屬性，設定所有邊框屬性。

數值：

border-width - 取值 thin, medium, thick 或指定長度。

border-style - 取值 none, dotted, dashed, solid, double, groove, ridge, inset, outset

border-color - 可用顏色名或RGB值。

說明：與其它簡寫屬性不同的是，每個設定只能取一個值，這個屬性均勻作用於框的各邊。

例子：

This Is A Example

CSS語法手冊（三）文字填充，邊框，邊界和位置屬性（一）(轉)

邊框顏色

相關文章