Web前端開發(fā) 課件 第11章 CSS3進(jìn)階VIP

第11章CSS3進(jìn)階主講教師：朱鐵櫻《Web前端開發(fā)》思維導(dǎo)圖11.1CSS3漸變在CSS3之前的版本中，如果需要添加漸變效果，通常要設(shè)置背景圖像來實(shí)現(xiàn)。而CSS3中增加了漸變屬性，通過漸變屬性可以輕松實(shí)現(xiàn)漸變效果。CSS3的漸變屬性主要包括線性漸變、徑向漸變和重復(fù)漸變。線性漸變漸變徑向漸變重復(fù)漸變11.1CSS3漸變（1）線性漸變在線性漸變過程中，起始顏色會沿著一條直線按順序過渡到結(jié)束顏色。運(yùn)用CSS3中的“background-image:linear-gradient（參數(shù)值）;”樣式可以實(shí)現(xiàn)線性漸變效果。11.1CSS3漸變（1）線性漸變線性漸變的語法格式background-image:linear-gradient(漸變角度,顏色值1,顏色值2...,顏色值n);漸變角度指水平線和漸變線之間的夾角，可以是以deg為單位的角度數(shù)值或“to”加“l(fā)eft”“right”“top”和“bottom”等關(guān)鍵詞。顏色值用于設(shè)置漸變顏色，其中“顏色值1”表示起始顏色，“顏色值n”表示結(jié)束顏色，起始顏色和結(jié)束顏色之間可以添加多個顏色值，各顏色值之間用“,”隔開。11.1CSS3漸變重復(fù)線性漸變重復(fù)線性漸變的語法格式background-image:repeating-linear-gradient(漸變角度,顏色值1,顏色值2...,顏色值n);在CSS3中，通過“background-image:repeating-linear-gradient（參數(shù)值）;”樣式可以實(shí)現(xiàn)重復(fù)線性漸變的效果。11.1CSS3漸變11.1CSS3漸變徑向漸變同樣是網(wǎng)頁中一種常用的漸變，在徑向漸變過程中，起始顏色會從一個中心點(diǎn)開始，按照橢圓或圓形形狀進(jìn)行擴(kuò)張漸變。運(yùn)用CSS3中的“background-image:radial-gradient（參數(shù)值）;”樣式可以實(shí)現(xiàn)徑向漸變效果。（2）徑向漸變11.1CSS3漸變徑向漸變的語法格式background-image:radial-gradient(漸變形狀圓心位置,顏色值1,顏色值2...,顏色值n);（2）徑向漸變漸變形狀用來定義徑向漸變的形狀，其取值即可以是定義水平和垂直半徑的像素值或百分比，也可以是相應(yīng)的關(guān)鍵詞。圓心位置用于確定元素漸變的中心位置，使用“at”加上關(guān)鍵詞或參數(shù)值來定義徑向漸變的中心位置?！邦伾?”表示起始顏色，“顏色值n”表示結(jié)束顏色，起始顏色和結(jié)束顏色之間可以添加多個顏色值，各顏色值之間用“,”隔開。11.1CSS3漸變重復(fù)徑向漸變重復(fù)線性漸變的語法格式background-image:repeating-radial-gradient(漸變形狀圓心位置,顏色值1,顏色值2...,顏色值n);在CSS3中，通過“background-image:repeating-radial-gradient（參數(shù)值）;”樣式可以實(shí)現(xiàn)重復(fù)徑向漸