--- tags: 軟體工程師體驗營 - 2023 --- # 🏅 切版任務 Day22 - background linear-gradient `linear-gradient` 可以用來讓背景產生漸層。 > 詳細可以再觀看 [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient) 文件 **範例一** ```css= /* 從紅色漸層到藍色(預設是由上到下漸層) */ background: linear-gradient(red, blue); ``` **範例二** ```css= /* 可以調整漸層的角度 */ background: linear-gradient(0deg, red, blue); /* 或是直接設定漸層方向 */ background: linear-gradient(to top, red, blue); ``` **範例三** ```css= /* 使用 % 調整顏色過渡點*/ 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://i.imgur.com/vftL5i0.png) <!-- 解答: 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)|