一、框填充屬性
1、padding-bottom
padding-left
padding-top
padding-right
功能:毎個容器都有邊框,這些屬性設(shè)置邊框與框內(nèi)元素間的距離。
數(shù)值:
長度 - 設(shè)置相對或絕對值。在數(shù)字后指定度量單位如下:mm, cm, in, pt, px, pc, ex, em。em 和 ex 設(shè)置產(chǎn)生相對于父字體的字體尺寸。
百分比 - 以父元素的百分比設(shè)置邊框。
說明:填充值不能使用負(fù)值,但可以是小數(shù)。
例子
2、padding
功能:是個簡寫屬性,用于設(shè)置上,下,左,右各個方向邊框和內(nèi)容元素的間距。
數(shù)值:同前。
說明:用單一值可以讓毎邊等距填充;如果用兩個值,則第一個值用于上下填充,第二個值用于左右填充;如果用三個值,則賦于上邊填充,左右填充和下邊填充;如果用四個值,則分別用于上,右,下,左填充??梢曰旌蠑?shù)值類型。
例子
二、框邊框?qū)傩?br />
1、border-top
border-bottom
border-right
border-left
功能:這四個屬性都是簡寫屬性,分別設(shè)置上,下,右,左的邊框?qū)傩?。缺省情況下,邊框沒有樣式設(shè)置。
數(shù)值:共有三個邊框?qū)傩?border-width: 取值為 thin, medium, thick或指定長度。
border-style: 設(shè)置用于修飾邊框的底紋??梢栽O(shè)置下列樣式:none, dotted,doshed, solid, double, groove, ridge, inset, outset。
border-color: 設(shè)置邊框顏色。
例子
2、border-top-width
border-bottom-width
border-right=width
border-left-width
功能:分別設(shè)置各個邊框的厚度。
數(shù)值:
thin - 細(xì)邊框。
medium - 中等線寬。
thick - 粗線。
長度 - 用相對或絕對單位設(shè)置邊框?qū)挾取?例子
3、border-width
功能:簡寫屬性,可同時設(shè)置四個邊框的寬度。
數(shù)值:
thin - 細(xì)邊框。
medium - 中等線寬。
thick - 粗線。
長度 - 用相對或絕對單位設(shè)置邊框?qū)挾取?說明:見 padding 說明。
例子:
邊框?qū)傩?br />
4、border-color
功能:簡寫屬性,設(shè)置四個邊框的顏色值。
數(shù)值:可以用顏色名或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
功能:用于顯示邊框和指定邊框樣式。
數(shù)值:
none - 不顯示邊框,為缺省值
dotted - 點線
dashed - 虛線
solid - 實線
double - 雙線
groove - 3D陷入線
ridge - 3D山脊?fàn)罹€
inset - 使頁面有沉入感
outset - 使頁面有浮出感
說明:并非所有瀏覽器都能顯示ridge, inset, outset 之類的樣式,有些瀏覽器將所有邊框都繪制成實線。
Example1
Example2
6、border
功能:簡寫屬性,設(shè)置所有邊框?qū)傩浴?數(shù)值:
border-width - 取值 thin, medium, thick 或指定長度。
border-style - 取值 none, dotted, dashed, solid, double, groove, ridge, inset, outset
border-color - 可用顏色名或RGB值。
說明:與其它簡寫屬性不同的是,每個設(shè)置只能取一個值,這個屬性均勻作用于框的各邊。
本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司!
分享名稱:文本填充,邊框,邊界和位置屬性
路徑分享:http://www.rwnh.cn/news2/315352.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站維護、做網(wǎng)站、App開發(fā)、網(wǎng)站策劃、網(wǎng)站設(shè)計、自適應(yīng)網(wǎng)站
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源:
創(chuàng)新互聯(lián)