Css背景和漸變屬性有哪些

本文小編為大家詳細(xì)介紹“Css背景和漸變屬性有哪些”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Css背景和漸變屬性有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

1.背景繪制區(qū)域

background-clip

設(shè)置背景顯示區(qū)域

屬性：background-clip

值：border-box：背景被裁剪到邊框，默認(rèn)值

padding-box：背景被裁減到內(nèi)邊距框(忽略內(nèi)邊距)

content-box：背景被裁減到內(nèi)容框上(只顯示內(nèi)容區(qū)域)

2.背景的定位區(qū)域

背景從哪開(kāi)始畫

屬性：background-origin

取值：border-box：從邊框開(kāi)始畫

padding-box：從內(nèi)邊距處開(kāi)始畫

content-box：從內(nèi)容區(qū)域上開(kāi)始畫

3.背景合并

屬性：background:

background：color url() repeat attachment position;

常用方式:

background：url repeat position;

background：url(images/1.jpg) no-repeat -15px 20px;

background-image：url();

background-repeat：no-repeat;

background-position：-15px 20px;

background：red;

background：url(1.jpg);

漸變

多個(gè)顏色值之間平緩過(guò)度

漸變分類：

1、線性漸變

2、徑向漸變

3、重復(fù)漸變

注意：

所有的漸變，都是通過(guò) background-image 進(jìn)行設(shè)置

線性漸變：linear-gradient

徑向漸變：radial-gradient

重復(fù)線性：repeating-linear-gradient

重復(fù)徑向：repeating-radial-gradient

background-image:linear-gradient();

1、線性漸變

linear-gradient(angle,color-point1,color-point2,...)

angle:

取值范圍有：關(guān)鍵詞：to top ,to bottom ,to right ,

角度： 0deg --> to top

90deg -->to right

180deg --> to bottom

color-point：漸變顏色的開(kāi)始點(diǎn)、中間過(guò)渡點(diǎn)、結(jié)束點(diǎn)

取值范圍有：

red 0%：從開(kāi)始處顯示紅色

green 50%： 到 50% 位置處 ，變成綠色

blue 100% ： 到結(jié)尾處，變?yōu)樗{(lán)色

2、徑向漸變

radial-gradient([size at position,]color-point1,color-point2, ....)

size at position：size即放射的圓形的半徑 position即原點(diǎn)所在坐標(biāo)

left top bottom right center

3、重復(fù)漸變

background-image：repeating-linear-gradient(to bottom,red 0,green 10px)；

4、瀏覽器兼容性

對(duì)不支持的版本，通過(guò)前綴

Firefox： -moz-

Chrome,Safar： -webkit-

Opera ：-o-

background-image：-webkit-linear-gradient(to bottom,red,green); Chrome Safari

background-image：-o-linear-gradient(to bottom,red,green); Opera

background-image：-moz-linear-gradient(to bottom,red,green); Firefox

讀到這里，這篇“Css背景和漸變屬性有哪些”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。