CSS Background 漸層
↓
↓
↓
↓
↑
→
↓
←
↖
↗
↘
↙
↙
↘
↗
↖
background-image: linear-gradient(𝘼, 𝘽);
background-image: linear-gradient(𝘼, 𝘽, 𝘾);
background-image: linear-gradient(𝘼, 𝘽, 𝘾, 𝘿);
background-image: linear-gradient(𝘼, 𝘽, 𝘾, 𝘿, 𝙀, 𝙁, ...);
顏色方向:由上而下
ex:background-image:linear-gradient(red, orange);
ex:background-image:linear-gradient(red, orange, yellow);
ex:background-image:linear-gradient(red, orange, yellow, green);
ex:background-image:linear-gradient(red, orange, yellow, green, blue, purple);
𝘼:red、𝘽:orange、𝘾:yellow、𝘿:green、𝙀:blue、𝙁:purple
background-image:linear-gradient(to top, 𝘼, 𝘽);
background-image:linear-gradient(to top, 𝘼, 𝘽, 𝘾, ...);
顏色方向:↑
ex:background-image:linear-gradient(to top, #ffffff, #33ccff, #000000);
𝘼:#000000、𝘽:#33ccff、𝘾:#ffffff
background-image:linear-gradient(to right, 𝘼, 𝘽);
background-image:linear-gradient(to right, 𝘼, 𝘽, 𝘾, ...);
顏色方向:→
ex:background-image:linear-gradient(to right, #ffffff, #33ccff);
𝘼:#000000、𝘽:#33ccff、𝘾:#ffffff
background-image:linear-gradient(to bottom, 𝘼, 𝘽);
background-image:linear-gradient(to bottom, 𝘼, 𝘽, 𝘾, ...);
顏色方向:↓
ex:background-image:linear-gradient(to bottom, #ffffff, #33ccff, #000000);
𝘼:#000000、𝘽:#33ccff、𝘾:#ffffff
與 background-image: linear-gradient(𝘼, 𝘽, 𝘾, ...); 相同
background-image:linear-gradient(to left, 𝘼, 𝘽);
background-image:linear-gradient(to left, 𝘼, 𝘽, 𝘾, ...);
顏色方向:←
ex:background-image:linear-gradient(to left, #ffffff, #33ccff, #000000);
𝘼:#000000、𝘽:#33ccff、𝘾:#ffffff
background-image:linear-gradient(to top left, 𝘼, 𝘽);
background-image:linear-gradient(to top left, 𝘼, 𝘽, 𝘾, ...);
顏色方向:↖
ex:background-image: linear-gradient(to top left, #000000, #33ccff, #ffffff);
𝘼:#000000、𝘽:#33ccff、𝘾:#ffffff
background-image:linear-gradient(to top right, 𝘼, 𝘽);
background-image:linear-gradient(to top right, 𝘼, 𝘽, 𝘾, ...);
顏色方向:↗
ex:background-image: linear-gradient(to top right, #000000, #33ccff, #ffffff);
𝘼:#000000、𝘽:#33ccff、𝘾:#ffffff
background-image:linear-gradient(to bottom right, 𝘼, 𝘽);
background-image:linear-gradient(to bottom right, 𝘼, 𝘽, 𝘾, ...);
顏色方向:↘
ex:background-image: linear-gradient(to bottom right, #000000, #33ccff, #ffffff);
𝘼:#000000、𝘽:#33ccff、𝘾:#ffffff
background-image:linear-gradient(to bottom left, 𝘼, 𝘽);
background-image:linear-gradient(to bottom left, 𝘼, 𝘽, 𝘾, ...);
顏色方向:↙
ex:background-image: linear-gradient(to bottom left, #000000, #33ccff, #ffffff);
𝘼:#000000、𝘽:#33ccff、𝘾:#ffffff
background-image:linear-gradient(0deg, 𝘼, 𝘽);
background-image:linear-gradient(0deg, 𝘼, 𝘽, 𝘾, ...);
顏色方向:
ex:background-image: linear-gradient(0deg, #000000, #33ccff, #ffffff);
𝘼:#000000、𝘽:#33ccff、𝘾:#ffffff
background-image:linear-gradient(90deg, 𝘼, 𝘽);
background-image:linear-gradient(90deg, 𝘼, 𝘽, 𝘾, ...);
顏色方向:
ex:background-image: linear-gradient(90deg, #000000, #33ccff, #ffffff);
𝘼:#000000、𝘽:#33ccff、𝘾:#ffffff
background-image:linear-gradient(180deg, 𝘼, 𝘽);
background-image:linear-gradient(180deg, 𝘼, 𝘽, 𝘾, ...);
顏色方向:
ex:background-image: linear-gradient(180deg, #000000, #33ccff, #ffffff);
𝘼:#000000、𝘽:#33ccff、𝘾:#ffffff
background-image:linear-gradient(135deg, 𝘼, 𝘽);
background-image:linear-gradient(135deg, 𝘼, 𝘽, 𝘾, ...);
顏色方向:
ex:background-image: linear-gradient(, #000000, #33ccff, #ffffff);
𝘼:#000000、𝘽:#33ccff、𝘾:#ffffff