一、背景
1.背景顏色background-color
{background-color: transparent |color}
不僅可以設置整個(gè)網(wǎng)頁(yè)的背景顏色,還可以設置指定HTML元素的背景色
2.背景圖片background-image
background-image: none |url(url)
3.背景圖片重復background-repeat
屬性值含義
repeat背景圖片水平和垂直方向都重復平鋪
repeat-x背景圖片水平方向重復平鋪
repeat-y背景圖片垂直方向重復平鋪
no-repeat背景圖片不重復平鋪
4.背景圖片顯示background-attachment
設定背景圖片是否隨文檔一起滾動(dòng),使背景圖片始終處于視野范圍內,以避免出現因頁(yè)面滾動(dòng)而消失的情況。
屬性值含義
scroll默認值,當頁(yè)面滾動(dòng)時(shí),背景圖片隨頁(yè)面一起滾動(dòng)
fixed背景圖片固定在頁(yè)面的可見(jiàn)區域
5.背景圖片位置background-position
屬性值含義
length設置圖片與邊距水平與垂直方向的距離長(cháng)度,后跟長(cháng)度單位
percentage以頁(yè)面元素框的寬度或高度的百分比放置圖片
top背景圖片頂部居中顯示
center背景圖片居中顯示
bottom背景圖片底部居中顯示
left背景圖片左部居中顯示
right背景圖片右部居中顯示
6.背景圖片大小background-size
屬性值含義
由浮點(diǎn)數字和單位標識符組成的長(cháng)度值,不可為負值
>取值范圍為0%—100%,不可為負值
cover保持背景圖片本身的寬高比例,將圖片縮放到正好完全覆蓋所定義的背景區域
contain保持背景圖片本身的寬高比例,將圖片縮放到寬度或高度正好適應所定義的背景區域。
二、邊框
1.邊框樣式:border-style
幾種邊框樣式可以定義在一個(gè)邊框中,從上邊框開(kāi)始按照順時(shí)針的方向分別定義邊框的上、右、下、左邊框樣式,從而形成多樣式邊框。
P{border-style:dotted solid dashedgroove}
屬性值
含義
none
無(wú)邊框,無(wú)論邊框寬度設為多大
dotted
點(diǎn)線(xiàn)式邊框
dashed
破折線(xiàn)式邊框
solid
直線(xiàn)式邊框
double
雙線(xiàn)式邊框
groove
槽線(xiàn)式邊框
ridge
脊線(xiàn)式邊框
inset
內嵌效果的邊框
outset
突起效果的邊框
2.邊框顏色:border-color
3.邊框線(xiàn)寬:border-width
屬性值
含義
medium
默認值,中等寬度
thin
比medium細
thick
比medium粗
length
自定義寬度
4.邊框復合屬性
{border: border-width | border-style |border-color}
這3個(gè)屬性順序可以自由調換
5.圓角邊框border-radius
可以包含兩個(gè)參數值
● 第一個(gè)參數表示圓角的水平半徑
● 第二個(gè)參數表示圓角的垂直半徑
● 兩個(gè)參數用斜線(xiàn)隔開(kāi)
可以包含2-4個(gè)屬性值
● 如直接賦值4個(gè),這4個(gè)值將按照top-left,top-right,bottom-right,bottom-left的順序來(lái)設置。