線性漸變和重複漸變

2022-04-29 06:21:06 字數 863 閱讀 5989

有三種型別的重複漸變,其中兩種當前在官方規範中支援,另一種在當前的工作草案中。

每個符號的語法與其相關的漸變型別相同。

例如,repeating-linear-gradient()遵循與之相同的語法

linear-gradient()

漸變重複

由最終的色彩停止決定

。如果這是在

20px中,梯度的大小(其隨後重複)是

20px

20px正方形。

如果有多種顏色鏈結到模式,

情況也是如此。

最終停止的最終顏色決定了重複的大小和位置。

效果:

也可以改變形狀:

效果:

線性漸變:

效果:

線性漸變和徑向漸變

linear gradient direction,color 寫法 background webkit linear gradient direction,color 1.direction 方向,預設方向是自上而下 寫法有 1.background webkit linear gradient ...

線性漸變和徑向漸變

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

線性漸變和放射性漸變

創造放射性漸變 context.createradialgradient x0,y0,r0,x1,y1,r1 引數 x0 漸變的開始圓的 x 座標,引數 y0 漸變的開始圓的 y 座標,引數 r0 開始圓的半徑,引數 x1 漸變的結束圓的 x 座標,引數 y1 漸變的結束圓的 y 座標,引數 r1 ...