---
tags: 軟體工程師體驗營 - 2023
---

# 🏅 切版任務 Day22 - background linear-gradient

`linear-gradient` 可以用來讓背景產生漸層。
> 詳細可以再觀看 [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient) 文件

**範例一**

/* 從紅色漸層到藍色（預設是由上到下漸層） */
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);

> [範例程式碼](https://codepen.io/hexschool/pen/abRVPjJ)

### 練習

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

<img src="https://i.imgur.com/3weK0dt.png" alt="練習圖" width="100">

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

## 回報流程

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


<!--

解答：
https://codepen.io/hexschool/pen/OJBzpjE

-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | 翔.#0859 | [Codepen](https://codepen.io/energy95272z/pen/XWxGxjm) |
| 2 | Döng#2328 | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/NWOJORe) |
| 3 | Lychee KK | [Codepen](https://codepen.io/kakakala/pen/KKGEGXO)|
| 4 | Berlin#7338 | [Codepen](https://codepen.io/3qberlin/pen/gOBEBXd)|
| 5 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/yLRwRPL)|
| 6 | 史滴芬#4310 | [Codepen](https://codepen.io/steven870107/pen/gOBEBod)|
| 7 | DeLi#8324 | [Codepen](https://codepen.io/delichaomoon/pen/zYmbmJN)|
| 8 | Quantum#6093 | [Codepen](https://codepen.io/Min-Hao-Hung/pen/QWZoJjj)|
| 9 | Nex#6093 | [Codepen](https://codepen.io/Samuel_D4C/pen/YzJgJgj)|
| 10 | vvay#4113 | [Codepen](https://codepen.io/pellmssx-the-sasster/pen/NWOJEaN)|
| 11 | JimWang#6134 | [Codepen](https://codepen.io/Jim-Wang-the-selector/pen/MWPxzOv)|
| 12 | 小魚#8613 | [Codepen](https://codepen.io/gizelliang/pen/rNqRQYp)|
| 13 | Jacky7035#9423 | [Codepen](https://codepen.io/adens123/pen/qBJvQYQ)|
| 14 | Tina02#2691 | [codepen](https://codepen.io/chjitlox-the-bashful/pen/QWZoJVp) |
| 15 | satarkuo#5736 | [codepen](https://codepen.io/SatarKuo/pen/MWPxzLr) |
| 16 | snow#0255 | [codepen](https://codepen.io/snow21723/pen/zYmbyOm) |
| 17 | 冬天#5215 | [codepen](https://codepen.io/winter_/pen/dygrwbx) |
| 18 | Eero#1147 | [codepen](https://codepen.io/Eero-Chiao/pen/KKGErLX) |
| 19 | Syrena #3897|[Codepen](https://codepen.io/Syrena-Chung/pen/MWPxZYG)|
| 20 | Akira#9996|[Codepen](https://codepen.io/Akira-Chen/pen/ExdMGmJ)|
| 21 | Ting.66#0912 |[Codepen](https://codepen.io/Ting66/pen/PoyLXEj?editors=1100)|
| 22 | ChaosTu#9311 |[Codepen](https://codepen.io/torotu/pen/vYVPvay?editors=1100)|
| 23 | Ataraxia#9977 |[Codepen](https://codepen.io/ataraxia8888/pen/abRwXvX)|
| 24 | 姜承#8204 |[Codepen](https://codepen.io/Troy0718/pen/poxYqBG)|
| 25 | 辣椒#1002 | [Codepen](https://codepen.io/chilichen118/pen/NWOJeZB) |
| 26 | Uli#1946 | [Codepen](https://codepen.io/uli1313/pen/vYVPvWK) |
| 27 | Kaya#8857 |[Codepen](https://codepen.io/laron9486/pen/GRYezoQ) |
| 28 |jia yu#8896 |[Codepen](https://codepen.io/fjqxaznl-the-reactor/pen/yLRwZXB) |
| 29 |依依#6306 |[Codepen](https://codepen.io/Rita-Yang/pen/xxyBMRE?editors=1100) |
| 30 |judy123#2363 |[Codepen](https://codepen.io/hsuantsong/pen/LYgaqOL) |
| 31 |peihsuan#6315|[Codepen](https://codepen.io/peihsuanlai/pen/oNaVmpG) |
| 32 |Ann Chou#0146|[Codepen](https://codepen.io/annchou_illu/pen/KKGEJEp) |
| 33 |Hao#2485|[Codepen](https://codepen.io/Seanfeb16/pen/PoyLVVV) |
| 34 |K（アギルダー）#0386|[Codepen](https://codepen.io/klay376014/pen/ZEqPPXJ) |
|35|肉個阿倫#7172|[Codepen](https://codepen.io/i9574385/pen/mdzooYJ)|
|36| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/mdzogye) |
|37| Rayo#8002 | [CodePen](https://codepen.io/loborayo/pen/XWxGwYj) |
|38| Jennifer Chuang#3937 | [CodePen](https://codepen.io/yujhen/pen/dygrxvP?editors=1111) |
|39| wiimax#4564|[Codepen](https://codepen.io/willismax/pen/PoyLMRj)
|40| 浪裡小白龍#6860|[Codepen](https://codepen.io/Emillo/pen/mdzgbEp?editors=1100)
|41| Yuu#5361 |[Codepen](https://codepen.io/alycehwy/pen/ExdJYwy)
|42| 銀光菇#1692 | [codepen](https://codepen.io/genesynthesis/pen/oNaVJrz)|
|43|汪汪#4486|[Codepen](https://codepen.io/hunwooooof/pen/zYmXOjK)|
|43|司機叔叔#2463|[Codepen](https://codepen.io/bigv5566/pen/KKGYKwV)|
|44|兔子#6746|[Codepen](https://codepen.io/CarrotDetector/pen/GRYLjzm)|
|45|yoyo#1003|[Codepen](https://codepen.io/pen/ZEqZpwP)|
|46|David0799#4415|[Codepen](https://codepen.io/David0799/pen/vYVMyOm)|
|47|QOO#8446|[Codepen](https://codepen.io/QOOQOOQ/pen/jOeRyqb?editors=1100)|
|48|Aritan#1931|[Codepen](https://codepen.io/Aritan/pen/jOeRXbw)|
|49|SKey#9905|[Codepen](https://codepen.io/Dale-Chien/pen/MWPRxEb)|
50|雲漢#5319|[codepen](https://codepen.io/keon981/pen/WNaWqNq?editors=0110)|
|51|HsienLu#8316|[Codepen](https://codepen.io/Hsienlu/pen/xxyBQNm)|
|52|henrykgb#5749|[Codepen](https://codepen.io/henrymorgan666/pen/JjmVQdy)|
|53|鄭舜仁#6606|[Codepen](https://codepen.io/randomno/pen/vYVMogY)|
|54|penny#6214|[Codepen](https://codepen.io/penny8989/pen/mdzYbEw)|
|55|townyuan#2653|[Codepen](https://codepen.io/townyuan/pen/PoyvqGO)|
| 56 | 東東#5015 |[Codepen](https://codepen.io/wearymask/pen/LYgoGWv)|
| 57 | wendyli#2155 |[Codepen](https://codepen.io/rockayumitw/pen/qBJGNbP)|
| 58 | HsuanTang#1349 |[Codepen](https://codepen.io/HsuanTang/pen/yLRWJYN)|
|59|Yvonne#2721|[Codepen](https://codepen.io/Evonne/pen/yLRWJVe)
|60|Janet#5784|[Codepen](https://codepen.io/janetlinnn/pen/JjmqKXy)
|61|lishuan#3698|[Codepen](https://codepen.io/lishuan/pen/KKGLaRz)
|62|DoryH#0526|[Codepen](https://codepen.io/dorihung/pen/yLRWzyR)
|63|boki#3717|[Codepen](https://codepen.io/boki-wang/pen/YzJbrYV?editors=1100)
|64|CuraLin#2648|[Codepen](https://codepen.io/curalin/pen/NWOVwPm)
|65|Kulimusoda#2785|[Codepen](https://codepen.io/yuch3n_chen/pen/abRrVeG)|
|66|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/QWZRaoa)|
|67|liam9930#4129|[CodePen](https://codepen.io/jgnjfvvt-the-lessful/pen/WNaBdqd?editors=1100)|
|68|吳偉雄恩#2256|[CodePen](https://codepen.io/Bamboo1212/pen/poxmOLd)|
|69|歐陽龍龍#1061|[CodePen](https://codepen.io/dizzydog-rgb/pen/gOBJqwW)|
| 70 | Tami#6742 | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/RwezPzj) |
| 71 | FiReBrO#0557 | [Codepen](https://codepen.io/firebro42/pen/WNaqrOo) |
| 72 | Snadra#1987 | [Codepen](https://codepen.io/mlqmhltg/pen/rNqEryO) |
| 73 | Celia#1715 | [Codepen](https://codepen.io/drdrvpgf-the-bashful/pen/VwEJNZB?editors=1100) |
| 74 | NathanJames#8120 | [Codepen](https://codepen.io/ufo060204/pen/abRgeaj) |
| 75 | 杰_jie#9088 |[Codepen](https://codepen.io/hmj8805/pen/xxyvJod)|
| 76 | Joanne Hu#0010 |[Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/LYXPYLR)|
| 77 | JasonChang#7847 |[Codepen](https://codepen.io/jsonChangJava/pen/RwqPWLP)|
| 78 | weiting#3489 |[Codepen](https://codepen.io/weiting14/pen/zYMGJJG)|
| 79 |yuling#1634|[codepen](https://codepen.io/igzdflpu/pen/ZEmbvoP)|
| 80 | 薇拉#8110 |[Codepen](https://codepen.io/michellecc0522/pen/QWJWYOK)|
| 81 | Rong |[Codepen](https://codepen.io/Loonng/pen/yLQObGm?editors=1100)|
| 82 | CMLB0212|[Codepen](https://codepen.io/Chungmin0212/pen/MWzyBvy?editors=0110)|
| 83 | 初心#9021|[Codepen](https://codepen.io/Sylviax/pen/zYMovjv?editors=0100)|
| 84 | PoWei#8484|[Codepen](https://codepen.io/harrison-wei-lai/pen/rNQpxzG)|
| 85 | 小明#4408|[Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/VwVdyVz)|
| 86 | betty#0693|[Codepen](https://codepen.io/betty-hu/pen/gOQdLKd?editors=1100)|