線性漸變和徑向漸變

2021-10-06 03:26:38 字數 973 閱讀 1109

linear-gradient(direction,color)
寫法:background:

-webkit-linear-

gradient

(direction,color)

1.direction:方向,預設方向是自上而下;寫法有:

1.background:

-webkit-linear-

gradient

(to top right,color)

2.background:

-webkit-linear-

gradient

(45deg,color)

//正則順時針,負則逆時針

2.color : 顏色

1.background:

-webkit-linear-

gradient

(45deg,red,yellow)

2.background:

-webkit-linear-

gradient

(45deg,red 10

%,yellow 90%)

//表示10%之前為紅色,10%-90%為漸變色,90%-100%為黃色

重複漸變

repeating-linear-

gradient

()

radial-

gradient()

radial-

gradient

(circle at center, red 0

, blue, green 100%)

/* 從元素中心點漸變,起始色為red,漸變到blue,終止色為green*/

/*circle為正圓,ellipse為橢圓*/

線性漸變和徑向漸變

格式 background image linear gradient 方向,起始顏色 終止顏色 方向 to left to right to top to bottom 角度 360 180 45 從左下到右上 90 相當於 to right 從左到右 135 從左上到右下 180 從上到下 di...

css3 線性漸變和徑向漸變

線性漸變 ie6以下不相容 徑向漸變 只支援firefox chrome和safari 注意 background image 可以寫 background 我自己在網頁中寫的徑向漸變相容 firefox chrome ie10 ie10 safari background image老式寫法 相容...

canvas中的線性漸變和徑向漸變

var b a.getcontext 2d var grd b.createradialgradient 75,50,5,90,60,100 徑向漸變,引數值引數 描述 x0 漸變開始點的 x 座標 y0 漸變開始點的 y 座標 x1 漸變結束點的 x 座標 y1 漸變結束點的 y 座標 同上 ad...