首頁(yè) 猿問 css3 漸變?cè)趺磳?shí)現(xiàn)？

css3 漸變?cè)趺磳?shí)現(xiàn)？

CSS3

四季花海 2019-03-12 09:08:51

查看完整描述

2 回答

臨摹微笑

TA貢獻(xiàn)1982條經(jīng)驗(yàn) 獲得超2個(gè)贊

針對(duì)不同瀏覽器有不同的前綴，基本還是相似的，下面的意思是線性漸變，從上方開始，從黑色漸變到白色
-webkit-linear-gradient(top,#000,#fff);
-moz-linear-gradient(top,#000,#fff);
-o-linear-gradient(top,,#000,#fff);
也可以加一些漸變中間的顏色
-webkit-linear-gradient(top,#000,#eee 20%,#fff);
也可以使用color stop,跟上面的意思相同
-webkit-linear-gradient(top,#000,color-stop(0.2, #eee),#fff)

反對(duì) 回復(fù) 2019-03-19

滄海一幻覺

TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超5個(gè)贊

屬性 Gradient( <漸變類型>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

-webkit-
-moz-l
-o-
前綴是各種瀏覽器的特有樣式

gradient是webkit引擎對(duì)漸變的實(shí)現(xiàn)參數(shù)，一共有五個(gè)。第一個(gè)參數(shù)表示漸變類型（type），可以是linear（線性漸變）或者radial（徑向漸變）。第二個(gè)參數(shù)和第三個(gè)參數(shù)，都是一對(duì)值，分別表示漸變起點(diǎn)和終點(diǎn)。這對(duì)值可以用坐標(biāo)形式表示，也可以用關(guān)鍵值表示，比如 left top（左上角）和left bottom（左下角）。第四個(gè)和第五個(gè)參數(shù)，分別是兩個(gè)color-stop函數(shù)。color-stop函數(shù)接受兩個(gè)參數(shù)，第一個(gè)表示漸變的位置，0為起點(diǎn)，0.5為中點(diǎn)，1為結(jié)束點(diǎn)；第二個(gè)表示該點(diǎn)的顏色。