---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 37

## 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); 

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

### 文字漸層
將文字背景設定漸層 `linear-gradient`
搭配 `background-clip: text;` 將背景裁切成只有文字部分，
以及文字顏色設定為透明 `color: transparent;` 呈現出背景
> background-clip 相關設定可以觀看 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip) 文件
> 由於 Chrome 對於 `background-clip: text;` 還沒有很好的支援度，所以在設定時要加上 webkit 前綴

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

### 題目
#### 嘗試實作出第六週漸層樣式

> 漸層角度可以觀看設計稿標示

1. 漸層按鈕


2. 漸層文字


## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：https://codepen.io/hexschool/pen/PoRJrKR?editors=1100 -->

回報區
---

| Discord | CodePen / 答案 |
|:-----------------:|:-------------------------------------------------------------------:|
| Iris Huang#6727 | [CodePen](https://codepen.io/ythuang/pen/QWmZxYx) |
| Vera#5592 | [CodePen](https://codepen.io/skvera/pen/MWVPdmG) |
| CloThEs#7837 | [CodePen](https://codepen.io/CloThEsZ/pen/ZExmQXL) |
| 布魯諾#7239 | [CodePen](https://codepen.io/bruno-yu/pen/LYdXGXg) |
| JackC#0411 | [CodePen](https://codepen.io/key0329/pen/VwXVegg) |
| zera#6060 | [codepen](https://codepen.io/zera-tseng/pen/mdxQVgN) |
| Clara#1275 | [codepen](https://codepen.io/bsupixqu/pen/YzaRqzo) |
| WEI_RIO#9342 | [CodePen](https://codepen.io/wei_wu/pen/abYQNdR) |
| christina#6185 | [Codepen](https://codepen.io/chrisc0210/pen/zYWmqqy) |
| bonnieli1414#4906 | [CodePen](https://codepen.io/bonnieli1414/pen/ZExmWBx?editors=1100) |
| Potatolee#7749 | [CodePen](https://codepen.io/potatoleee/pen/QWmJNvM) |
| PeggyLiao#1552 | [CodePen](https://codepen.io/PeiJu-Liao/pen/GRxwZMZ?editors=1100) |
| LHchien33#6232 | [CodePen](https://codepen.io/lin_chien/pen/QWmJNYm) |
| Chi#7605 | [Codepen](https://codepen.io/YoChi84/pen/eYMQZxb) |
| Amberhh#2465 | [Codepen](https://codepen.io/Amberhh/pen/OJvaNYj) |
|Benson#6763|[Codepen](https://codepen.io/kumashow/pen/OJvaNBm)|
|L0F0#8733|[Codepen](https://codepen.io/l0f0/pen/bGvQpNw?editors=1100)|
|大衛#4869|[Codepen](https://codepen.io/exnsrpjc/pen/KKorzLB?editors=1100)|
| 黃士桓#7654 | [codePen](https://codepen.io/shr-huan-huang/pen/PoRxNrj) |
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/dymQGww) |
| yuyu#6310 | [CodePen](https://codepen.io/hexschool/pen/PoRJrKR?editors=1100) |
| 小諾#1866 | [CodePen](https://codepen.io/noichan/pen/XWEyKbL) |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/WNzYxGg) |
|ssozr#4680|[codepen](https://codepen.io/ssozr/pen/yLKQJoW)|
|Joyce#3790|[codepen](https://codepen.io/joycehuang/pen/rNdQLGN?editors=1100)|
|黑白兔#0684|[codepen](https://codepen.io/johnny329/pen/OJvaRmY)|
|威0#6919|[Codepen](https://codepen.io/n0918679182/pen/yLKQajV?editors=1100)
|yo_yo#2678|[Codepen](https://codepen.io/djmliogn-the-flexboxer/pen/eYMQdoe)
|雷雷#7844|[Codepen](https://codepen.io/lei-yi-jie/pen/PoRxbOG)
| JarDar#6980 |[codepen](https://codepen.io/jardarpen/pen/gOeQLdL)|
| 郭芙蘭 #6374 |[codepen](https://codepen.io/flora_Kuo/pen/vYRavgo)|
| 小白#2406 | [CodePen](https://codepen.io/gracewhite/pen/gOeQLoM) |
| 𝓛𝓊𝒸𝓎#8635 | [CodePen](https://codepen.io/lucygirl/pen/ZExmBRM) |
| Henry#7386 | [CodePen](https://codepen.io/h1nr9/pen/abYQpYN) |
| 我是泇吟 #5189 | [CodePen](https://codepen.io/kljuqbxs/pen/ZExmyGP) |
|Sentiments#4883|[codepen](https://codepen.io/Sentiments/pen/KKorqMr)|
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/bGvQRWK)|
| Yunei#6323 |[Codepen](https://codepen.io/Yunei/pen/LYdXLQb)|
|int#7518|[Codepen](https://codepen.io/intHuang/pen/VwXVWEz)|
|RayChen#6088|[Codepen](https://codepen.io/raychen1996/pen/mdxQMVG)|
|鉦勝 #8333|[Codepen](https://codepen.io/atckmax823/pen/NWYEvKm)|
|yu魚#1330 | [CodePen](https://codepen.io/Yu_yu/pen/YzaREYQ)|
|Glamorouscoast#4095| [CodePen](https://codepen.io/GcTzw/pen/OJvazjY)|
| 楓之聲#6945 | [Codepen](https://codepen.io/sshane258/pen/OJvazxY) |
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/NWYLgKe)|
| azami#5986 |[CodePen](https://codepen.io/azami/pen/OJvagea)|
| Hsiu#8767 |[CodePen](https://codepen.io/amy-hsiu/pen/oNqQQNX)|
| Clara Cai#7097 |[CodePen](https://codepen.io/Clara-Snowy/pen/MWVzzpx)|
| Vian#7338 |[CodePen](https://codepen.io/vianwu31/pen/YzaRRME?editors=1100)|
| 紙飛機 #1335 |[CodePen](https://codepen.io/paperplanea/pen/xxWQmKg)|
| kancheng#3915 |[CodePen](https://codepen.io/kancheng/pen/QWmJomJ)|
|IreneY #0086|[Codepen](https://codepen.io/HalfPlannedJourney/pen/KKorEGY)|
|NeilLin#3009|[Codepen](https://codepen.io/a0071421/pen/LYdXvdd)|
|aka|[codepan](https://github.com/weiyi-li00/react-daily-task-router/blob/main/src/App.js)|
| 咻蹦#1526 |[CodePen](https://codepen.io/emmasyu/pen/JjLeQXj)|
| 阿蘇#8531 |[CodePen](https://codepen.io/susu8327/pen/JjLwrjv)|
| QOO#8446 |[CodePen](https://codepen.io/QOOQOOQ/pen/dymwRmp)|
| LinaChen#1796 |[CodePen](https://codepen.io/LinaChen/pen/mdxQPrJ)|
| Melon#0380 |[CodePen](https://codepen.io/BalaFang/pen/dymwdmE)|
|鴨鴨#9822|[CodePen](https://codepen.io/qrvrqvxv-the-selector/pen/ZExVrNR)|
| YU #0618 | [CodePen](https://codepen.io/yoken_/pen/PoRXXdV) |
|Fang#4680| [Codepen](https://codepen.io/std95174/pen/rNdPJrp)|
|suihsilan#9485| [Codepen](https://codepen.io/suihsilan/pen/zYWeboM)|
|J_u_d_y#5993|[Codepen](https://codepen.io/J_u_d_y/pen/gOeqVJB?editors=1100)|
|RayPo#8090|[Codepen](https://codepen.io/raycheng/pen/XWEGmLw)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/ZExPOJR?editors=1100) |
|Cream#3449|[Codepen](https://codepen.io/frxdwbbi-the-sasster/pen/vYRPgBq)|
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/oNqVZxL)|
|piha#9987|[Codepen](https://codepen.io/pihahaha/pen/OJvqjpQ)|
|Yuna Huang#2692|[Codepen](https://codepen.io/Yuna1002/pen/KKoGpNo)|
|Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/NWYmGvb)
|Cliff#4606|[codepen](https://codepen.io/Cliff_hex/pen/abYxLbZ?editors=1100)|
|mei#8421|[codepen](https://codepen.io/Shila-Chen/pen/KKoYoLZ)|
|YI#0863|[codepen](https://codepen.io/YI0305/pen/PoRvwNb?editors=1100)|
|Van.CS #2067|[Codepen](https://codepen.io/fbacojji-the-selector/pen/GRxaQVw)|
|Nini Chen#5790|[Codepen](https://codepen.io/ninistyle/pen/XWEwqdx?editors=1100)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/xxWoYqw)
|choubree#4350|[Codepen](https://codepen.io/BreeChou/pen/ExEqWeO)
|Tuhacrt#0008|[Codepen](https://codepen.io/Tuhacrt/pen/wvmLRoW)|
|jin.huang#4666|[Codepen](https://codepen.io/haha1196/pen/mdxZvQp)|
|Jamie Wu#9345|[Codepen](https://codepen.io/Wu220103/pen/qBozeow)|
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/mdxNxEL?editors=1100)|
|Tori#1248|[Codepen](https://codepen.io/FlyTori/pen/qBoeYQw)|
|Evan |[Codepen](https://codepen.io/Evan_9837/pen/eYrYYBq)|
|yuchenye#6119 |[Codepen](https://codepen.io/yuchen/pen/NWMWavj)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/PoewbMW)|
|NathanJames#8120|[Codepen](https://codepen.io/ufo060204/pen/MWGaZRW)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/eYrzdvK)|