前端筆記九,背景 邊框和補丁相關屬性

2022-07-25 08:06:07 字數 1857 閱讀 9304

常用的背景相關屬性:以下屬性均在style內設定

background:設定物件的背景樣式,不建議直接通過該屬性來控制

background-color:設定背景色,如果設定了背景則會覆蓋背景色

background-image:設定背景,使用url()函式

background-position:設定物件的背景的位置,第乙個表示橫座標,第二個表示縱座標

background-clip:設定背景覆蓋的範圍,支援如下屬性值

background-origin:設定背景覆蓋的起點,類似之前的background-position,可選的屬性值

background-origin和background-size在safari、chrome中使用時,如果不讀,則可以在前面新增 -webkit- 

指定多個背景時,每個屬性都需要指定多個,中間用逗號隔開

邊框相關屬性

border:復合屬性,可以同時設定邊框的粗細,線型,顏色等

border-color:設定邊框的顏色

border-style:設定元件的邊框線型,值的數量與上同理

border-width:設定邊框的線寬,值的數量與上同理

border-top:復合屬性,設定上邊框的樣式

border-top-color:設定上邊框的顏色

border-top-style:設定上邊框的樣式

border-top-width:設定上邊框的線寬

上邊的top換成left、right、bottom分別表示左邊框的,右邊框的,下邊框的

其中,邊框顏色可以是任何有效的顏色值,線寬可以是任何有效的長度值,線性可以支援以下值:

漸變邊框

border-top-colors:設定上邊框的顏色,如果上邊框的寬度為npx,則可以設定n種顏色;如果顏色數量小於n,則最後一種顏色會覆蓋剩下的寬度

border-right-colors,border-bottom-colors,border-left-colors同理

博主備註:這個漸變邊框在實際**中沒有實現

圓角邊框

border-radius:設定四個角的圓角半徑

border-top-left-radius:設定左上角的圓角半徑

border-top-right-radius,border-bottom-left-radius,border-bottom-right-radius同理

邊框

border-image:遵循的格式:

補丁相關屬性

padding:可以設定4個數值,分別表示上下左右四個邊的內部定距離;設定3、2、1個數值與之前對應關係相同

padding-top:設定上邊的內補丁距離

padding-bottom,padding-left,padding-right同理

margin:設定外補丁距離,對應關係與padding一致

margin-top,margin-bottom,margin-left,margin-right同理

css3背景 邊框 和補丁相關屬性

border 基本語法 border border width border style border color 預設值為 medium none border color 的預設值將採用文字顏色 border top,border left,border right,border bottom ...

css3背景 邊框 和補丁相關屬性 (二)

背景 background background color background image background repeat background attachment background position 預設值為 transparent none repeat scroll 0 0 設定...

前端學習之背景 邊框和邊距相關屬性

background 設定物件的背景樣式。該屬性是 乙個復合屬性,可用於同時設定背景色 背景 背景重複模式等屬性。該屬性值格式如下 background color background image background repeat background attachment background...