CSS的背景屬性和邊框屬性

2021-09-03 00:10:34 字數 2481 閱讀 6501

css的背景屬性:

background                  簡寫屬性,作用是將背景屬性設定在乙個宣告中

background-attachment 背景影象是否固定或者隨著頁面的其餘部分滾動

background-color 設定元素的背景顏色

background-image 把影象設定為背景

background-position 設定背景影象的起始位置

background-repeat 設定背景影象是否如何重複

例項**一:

顯示效果:

小結:背景的屬性有5個,可以直接放在background中.

background的屬性順序不是固定,但是建議順序為:背景色,背景圖,是否擴充套件,位置,是否固定

在預設情況下,背景圖的原點是包含其父元素的左上角,但是設定background-attachment:fixed,則原點變成瀏覽器視窗的左上角

css的邊框屬性:

border                  簡寫屬性,用於把四個邊的屬性設定在乙個宣告

border-style 用於設定元素所有的邊框,或者單獨地為各邊設定邊框寬度

border-width 用於為元素的所有邊框設定寬度,或者單獨的為各邊框設定寬度

border-color 設定元素的所有邊框中可見部分的,或為四個邊分別設定顏色

border-bottom 用於把下邊框的所有屬性設定到乙個宣告中

border-bottom-color 設定元素的下邊框的顏色

border-bottom-style 設定元素的下邊框的樣式

border-bottom-width 設定元素的下邊框的寬度

border-left 用於把左邊框的所有屬性設定到乙個宣告中

border-left-color 設定元素的左邊框的顏色

border-left-style 設定元素的左邊框的樣式

border-left-width 設定元素的左邊框的寬度

border-right 用於把右邊框的所有屬性設定到乙個宣告中

border-right-color 設定元素的右邊框的顏色

border-right-style 設定元素的右邊框的樣式

border-right-width 設定元素的右邊框的寬度

border-top 用於把上邊框的所有屬性設定到乙個宣告中

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

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

border-top-width 設定元素的上邊框的寬度

邊框可以設定的樣式有:

none            定義無邊框

hidden 與"none"相同,對於表,hidden用於解決邊框衝突

dotted 定義點狀邊框

dashed 定義虛線邊框

soild 定義實線

double 定義雙線,雙線的寬度等於border-width的值

groove 定義3d凹槽邊框,其效果取決於border-color的值

ridge 定義3d壟狀邊框,其效果取決於border-color的值

inset 定義3d inset邊框,其效果取決於border-color的值

outset 定義3d outset邊框,其效果取決於border-color的值

inherit 規定應該從父元素繼承邊框樣式

例項**二:

hello world!

效果如下:

例項**三:

效果顯示為:

css基礎入門文字 背景和邊框屬性

1 font size 10px 文字大小 2 color 文字顏色 3 font family 微軟雅黑 文字字型 4 line height 行高 1 background color 背景顏色 2 background repeat no repeat repeat x repeat y 背景...

CSS邊框屬性

這個屬性用來設定上下左右邊框的風格,它的值如下 這個屬性用來設定上下左右邊框的寬度,它的值如下 演示示例 分別用medium,thin,thick和長度單位定製的css邊框寬度屬性示例 這個屬性用來設定上下左右邊框的顏色。例句如下 d5 演示示例 這個屬性是邊框屬性的乙個快捷的綜合寫法,它包含bor...

CSS邊框屬性

這個屬性用來設定上下左右邊框的風格,它的值如下 這個屬性用來設定上下左右邊框的寬度,它的值如下 演示示例 分別用medium,thin,thick和長度單位定製的css邊框寬度屬性示例 這個屬性用來設定上下左右邊框的顏色。例句如下 d5 演示示例 這個屬性是邊框屬性的乙個快捷的綜合寫法,它包含bor...