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

➢background: 設定物件的背景樣式。該屬性是-乙個復合屬性,可用於同時設定背景色、

背景、背景重複模式等屬性。該屬性值格式如下:background-color、background- image、background-repeat、background-attachment、background-position

➢background-color: 用於設定背景色。同時設定了背景色和背景，則背景圖

片將覆蓋背景色。

➢background-image: 用於設定背景。該屬性需要使用url()函式指定位址

➢background-repeat: 用於設定物件的背景是否平鋪。在指定該屬性之前，必須先指定background-image屬性。該屬性有repeat.no-repeat.repeat-x、repeat-y

➢background-attachment: 用於設定背景是隨物件內容滾動還是固定的。在指定該屬性之前，必須先指定background- image屬性。fixed：背景固定。

➢background position:用於設定物件的背景位置。

➢background-origin屬性用於指定背景從**覆蓋，可以指定如下幾個屬性值。

border-box: 從邊框區開始。padding-box: 從內填充區開始。content-box: 從內容區開始

使用漸變背景

➢linear-gradient：to top、to bottom、to left、to right、to left top . . . . . .

background:linear-gradient (0deg,red, blue)、 紅藍線性漸變

➢repeating-linear-gradient函式來設定迴圈線性漸變，將會迴圈利用給出的漸變顏色形成更絢麗的背景。background : repeating-linear-gradient (red, blue 10%，magenta 20%)

紅、藍、洋紅迴圈線性漸變

➢repeating-radial-gradient設定迴圈徑向漸變

➢border: 是復合屬性，用於設定目標元素的邊框樣式。可設定邊框的粗細、線型、顏色。

➢border-color: 用於設定元素的邊框顏色。如果提供4個引數值，則將按上、右、下、

左的順序一次設定4個邊框的顏色:如果只提供1個引數值，則將用於設定4個邊框

的顏色;如果提供2個引數值，則第乙個用於設定上、下兩個邊框的顏色:第二個用

於設定左、右兩個邊框的顏色;如果提供3個引數值，則第乙個用於設定上邊框的顏

色，第二個用於設定左、右兩個邊框的顏色，第三個用於設定下邊框的顏色。

➢border-style: 用於設定元素的邊框線型。設定規則同上

➢border-width: 用於設定目標元素的邊框線寬。設定規則同上。

➢border-top: 這是乙個復合屬性，用於設定目標元素的上邊框樣式。可同時設定邊框的

粗細、線型、顏色。

➢border-top-color; 用於設定目標元素的上邊框顏色。

➢border-top-style: 用於設定目標元素的上邊框線型。

➢border-top-width: 用於設定目標元素的上邊框線寬。

border-right、border-left、border-bottom是復合屬性，屬性同上

➢none:無邊框。

➢hidden: 隱藏邊框。

➢dotted: 點線邊框。

➢dashed: 虛線邊框。

➢solid: 實線邊框。

➢double:雙線邊框。

border-radius：圓角邊框

內填充相關屬性

➢padding:該屬性可以同時設定上、下、左、右4個邊的內填充距離。該屬性允許設定

4個長度，分別對應於上、右、下、左4個邊的內填充距離;

➢padding-top: 設定上邊的內填充距離。

➢padding-right: 設定右邊的內填充距離。

➢padding-bottom: 設定下邊的內填充距離。

➢padding-lef: 設定左邊的內填充距離。

➢margin: 該屬性可以同時設定上、下、左、右4個邊的外邊距距離。該屬性允許設定4個長度，分別對應於上、右、下、左4個邊的外邊距距離;

➢margin-top: 設定上邊的外邊距距離。

➢margin-right: 設定右邊的外邊距距離。

➢margin-bottom: 設定下邊的外邊距距離。

➢margin-left: 設定左邊的外邊距距離。

背景 邊框和邊距相關屬性 學習總結

css的乙個重要概念是盒模型。乙個html元素所占用的矩形區域可以稱之為乙個 盒子 該矩形區域由內容區 內填充區 邊框區和外邊距區組成background 用於設定物件的背景格式。其復合屬性包括 background color 背景顏色 background image 背景 background...

CSS學習 文字排版,顏色,背景,邊框,邊距

調整字元間距 letter spacing normal 長度 調整單詞間距 word spacing normal 長度 新增文字修飾 text decoration underline overline line through blink none 設定文字排列方式 text align le...

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

常用的背景相關屬性 以下屬性均在style內設定 background 設定物件的背景樣式，不建議直接通過該屬性來控制 background color 設定背景色，如果設定了背景則會覆蓋背景色 background image 設定背景，使用url 函式 background position 設...