🏅 切版任務 Day22 - background linear-gradient

linear-gradient 可以用來讓背景產生漸層。

詳細可以再觀看 MDN 文件

範例一

/* 從紅色漸層到藍色（預設是由上到下漸層） */
background: linear-gradient(red, blue); 

範例二

/* 可以調整漸層的角度 */
background: linear-gradient(0deg, red, blue); 
/* 或是直接設定漸層方向 */
background: linear-gradient(to top, red, blue); 

範例三

/* 使用 % 調整顏色過渡點*/
background: linear-gradient(90deg, red 0%, blue 80%, red);

範例程式碼

練習

嘗試運用 linear-gradient 呈現出如圖漸層效果

左 -> 右：rgb(0, 0, 0, 1) -> rgb(0, 0, 0, 0.5) -> rgb(0, 0, 0, 0.3)

回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
   （也可以將答案直接貼至「回報區」）

回報區

報數	Discord 名字	Codepen／其他回饋
1	翔.#0859	Codepen
2	Döng#2328	Codepen
3	Lychee KK	Codepen
4	Berlin#7338	Codepen
5	Rochel#4754	Codepen
6	史滴芬#4310	Codepen
7	DeLi#8324	Codepen
8	Quantum#6093	Codepen
9	Nex#6093	Codepen
10	vvay#4113	Codepen
11	JimWang#6134	Codepen
12	小魚#8613	Codepen
13	Jacky7035#9423	Codepen
14	Tina02#2691	codepen
15	satarkuo#5736	codepen
16	snow#0255	codepen
17	冬天#5215	codepen
18	Eero#1147	codepen
19	Syrena #3897	Codepen
20	Akira#9996	Codepen
21	Ting.66#0912	Codepen
22	ChaosTu#9311	Codepen
23	Ataraxia#9977	Codepen
24	姜承#8204	Codepen
25	辣椒#1002	Codepen
26	Uli#1946	Codepen
27	Kaya#8857	Codepen
28	jia yu#8896	Codepen
29	依依#6306	Codepen
30	judy123#2363	Codepen
31	peihsuan#6315	Codepen
32	Ann Chou#0146	Codepen
33	Hao#2485	Codepen
34	K（アギルダー）#0386	Codepen
35	肉個阿倫#7172	Codepen
36	Jenny真#7532	CodePen
37	Rayo#8002	CodePen
38	Jennifer Chuang#3937	CodePen
39	wiimax#4564	Codepen
40	浪裡小白龍#6860	Codepen
41	Yuu#5361	Codepen
42	銀光菇#1692	codepen
43	汪汪#4486	Codepen
43	司機叔叔#2463	Codepen
44	兔子#6746	Codepen
45	yoyo#1003	Codepen
46	David0799#4415	Codepen
47	QOO#8446	Codepen
48	Aritan#1931	Codepen
49	SKey#9905	Codepen
50	雲漢#5319	codepen
51	HsienLu#8316	Codepen
52	henrykgb#5749	Codepen
53	鄭舜仁#6606	Codepen
54	penny#6214	Codepen
55	townyuan#2653	Codepen
56	東東#5015	Codepen
57	wendyli#2155	Codepen
58	HsuanTang#1349	Codepen
59	Yvonne#2721	Codepen
60	Janet#5784	Codepen
61	lishuan#3698	Codepen
62	DoryH#0526	Codepen
63	boki#3717	Codepen
64	CuraLin#2648	Codepen
65	Kulimusoda#2785	Codepen
66	PayRoom#8328	CodePen
67	liam9930#4129	CodePen
68	吳偉雄恩#2256	CodePen
69	歐陽龍龍#1061	CodePen
70	Tami#6742	Codepen
71	FiReBrO#0557	Codepen
72	Snadra#1987	Codepen
73	Celia#1715	Codepen
74	NathanJames#8120	Codepen
75	杰_jie#9088	Codepen
76	Joanne Hu#0010	Codepen
77	JasonChang#7847	Codepen
78	weiting#3489	Codepen
79	yuling#1634	codepen
80	薇拉#8110	Codepen
81	Rong	Codepen
82	CMLB0212	Codepen
83	初心#9021	Codepen
84	PoWei#8484	Codepen
85	小明#4408	Codepen
86	betty#0693	Codepen