首頁 > web前端 > css教學 > CSS語法手冊(三)文字填充,邊框,邊界和位置屬性(一)

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

黄舟
發布: 2016-12-19 16:14:10
原創
1662 人瀏覽過

一、框填充屬性

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 說明。
範例:

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

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%)
範例:

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

5、border-style

功能:用於顯示邊框和指定邊框樣式。
數值:
none - 不顯示邊框,為缺省值
dotted - 點線
dashed - 虛線
solid - 實線
double - 雙線
groove - 3D陷入線
ridge - 3Din山脊頁面有沉入感
outset - 讓頁面有浮出感
說明:並非所有瀏覽器都能顯示ridge, inset, outset 之類的樣式,有些瀏覽器將所有邊框都繪製成實線。

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

6、border

功能:簡寫屬性,設定所有邊框屬性。

數值:
border-width - 取值 thin, medium, thick 或指定長度。
border-style - 取值 none, dotted, dashed, solid, double, groove, ridge, inset, outset
border-color - 可用顏色名稱或RGB值。
說明:與其它簡寫屬性不同的是,每個設定只能取一個值,這個屬性均勻作用於框的各邊。
例子:

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

 以上就是CSS文法手冊(三)文字填充,邊框,邊界與位置屬性(一)的內容,更多相關內容請關注PHP中文網(m.sbmmt.com)! 


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板