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

# 🏅 切版任務 Day23 - overflow 跟側邊陰影定位

觀看此[文章](https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow)了解 overflow 屬性使用方式。

## 題目
嘗試利用上週練習的偽元素與漸層技巧，搭配 overflow 製作出設計稿中的這個區塊：


> - 超出區塊的 logo 會被覆蓋，可以左右滾動呈現（運用 overflow）
> - 兩側為由外到內黑色漸層陰影，定位在區塊左右邊界（可以使用偽元素 `::before`、`::after` 搭配 position 定位）
>
> 呈現示意：
>
> 

可以利用此 [模板](https://codepen.io/hexschool/pen/OJBwZOV) 修改 `...` 的部分練習，
也可以嘗試自己從頭開始練習製作。

## 回報流程

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


<!--

解答：
https://codepen.io/hexschool/pen/abRjKbX
-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | 冬天#5215 | [codepen](https://codepen.io/winter_/pen/YzJMoGj)
|2|雲漢#5319|[codepen](https://codepen.io/keon981/pen/vYVMqNr)
| 3 | 翔.#0859|[codepen](https://codepen.io/energy95272z/pen/gOByNmE)|
| 4 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/XWxQLag) |
| 5 | ChaosTu#9311 | [Codepen](https://codepen.io/torotu/pen/ExdJBME) |
| 6 | Eero#1147|[codepen](https://codepen.io/Eero-Chiao/pen/rNqbERY)|
| 7 | 銀光菇#1692 | [Codepen](https://codepen.io/genesynthesis/pen/vYVMqKa) |
| 8 | Quantum#6093 | [Codepen](https://codepen.io/Min-Hao-Hung/pen/jOeRgEB)|
| 9 | Lychee KK | [Codepen](https://codepen.io/kakakala/pen/RweOXRw)|
| 10 | Jacky7035#9423 | [Codepen](https://codepen.io/adens123/pen/xxyeoMz)|
| 11 | Uli#1946 | [Codepen](https://codepen.io/uli1313/pen/abRxeJP)|
| 12 | Ann Chou#0146 | [Codepen](https://codepen.io/annchou_illu/pen/MWPRMvb)|
| 13 | Tina02#2691 | [codepen](https://codepen.io/chjitlox-the-bashful/pen/RweOXzo) |
| 14 | K（アギルダー）#0386 | [codepen](https://codepen.io/klay376014/pen/PoygMMj) |
| 15 | 依依#6306 | [codepen](https://codepen.io/Rita-Yang/pen/xxyevMv) |
| 16 | penny#6214 | [codepen](https://codepen.io/penny8989/pen/rNqgBGN) |
| 17 | vvay#4113 | [codepen](https://codepen.io/pellmssx-the-sasster/pen/dygLxmy) |
| 18 | snow#0255 | [codepen](https://codepen.io/snow21723/pen/abRroLd) |
| 19 | Hao#2485 | [codepen](https://codepen.io/Seanfeb16/pen/VwEOZgr) |
| 20 | SKey#9905 | [codepen](https://codepen.io/Dale-Chien/pen/qBJweoz) |
| 21 | 鄭舜仁#6606 | [codepen](https://codepen.io/randomno/pen/MWPdgXg) |
| 22 | Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/bGmyGQV) |
| 23 | jia yu#8896 | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/RwemNpN) |
| 24 | townyuan#2653 | [CodePen](https://codepen.io/townyuan/pen/RwemPZZ) |
| 25 | Berlin#7338 | [CodePen](https://codepen.io/3qberlin/pen/bGmJPxd) |
| 26 | Akira#9996 | [CodePen](https://codepen.io/Akira-Chen/pen/mdzYeMa) |
| 27 | 浪裡小白龍#6860 | [CodePen](https://codepen.io/Emillo/pen/XWxwXWE) |
|28| wiimax#4564| [Codepen](https://codepen.io/willismax/pen/poxmgWp)
| 29 | Kaya#8857 | [Codepen](https://codepen.io/laron9486/pen/RwemrjP) |
| 30 | 吳偉雄恩#2256 | [Codepen](https://codepen.io/Bamboo1212/pen/PoyvNpE) |
| 31 | wendyli#2155 | [Codepen](https://codepen.io/rockayumitw/pen/Baqezzb) |
| 32 | 兔子#6746 | [Codepen](https://codepen.io/CarrotDetector/pen/QWZRNyB)
| 33 | N0c7iluc3n7#4390 | [Codepen](https://codepen.io/huang-yu-cheng/pen/jOeorGb)
| 34 | HsuanTang#1349 | [Codepen](https://codepen.io/HsuanTang/pen/abRrZNW)
| 35 | Janet#5784 | [Codepen](https://codepen.io/janetlinnn/pen/xxyNOVr)
| 36 | 辣椒#1002 | [Codepen](https://codepen.io/chilichen118/pen/KKGLgbo) |
| 37 | Rayo#8002 | [Codepen](https://codepen.io/loborayo/pen/GRYaKbB) |
| 38 | lishuan#3698 | [Codepen](https://codepen.io/lishuan/pen/GRYarzb) |
| 39 | David0799#4415 | [Codepen](https://codepen.io/David0799/pen/XWxwgEg) |
|40|汪汪#4486|[Codepen](https://codepen.io/hunwooooof/pen/gOBJGaW)|
|41|henrykgb#5749|[Codepen](https://codepen.io/henrymorgan666/pen/eYPayoQ)|
|42|liam9930#4129|[Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/ExdzQRV?editors=1100)|
|43|gahwa#3562|[Codepen](https://codepen.io/gahwa17/pen/dygEmvd)|
|44|Jennifer Chuang#3937|[Codepen](https://codepen.io/yujhen/pen/VwENrRN)|
|45| JimWang#6134 | [Codepen](https://codepen.io/Jim-Wang-the-selector/pen/abRgbQL?editors=1100) |
|46|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/abRgzMX)|
|47| Tami#6742 | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/YzJoXgQ) |
|48| FiReBrO#0557 | [Codepen](https://codepen.io/firebro42/pen/wvYLMrG) |
|49| yoyo#1003 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/eYPaGKO) |
|49| 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/JjmQWrm) |
|50| Celia#1715 | [Codepen](https://codepen.io/drdrvpgf-the-bashful/pen/ExdBJQL?editors=1100) |
|51| NathanJames#8120 | [Codepen](https://codepen.io/ufo060204/pen/bGmXbbg) |
|52| 小華#3204 | [Codepen](https://codepen.io/franfranfran/pen/mdQbezX?editors=1100)
|53| Ataraxia#9977 | [Codepen](https://codepen.io/ataraxia8888/pen/ZEqZPOp) |
|54| 肉個阿倫#7172 | [Codepen](https://codepen.io/i9574385/pen/BaGNKKb) |
|55| weiting#3489 | [Codepen](https://codepen.io/weiting14/pen/jOQPemO?editors=1100) |
| 56 | 薇拉#8110 |[Codepen](https://codepen.io/michellecc0522/pen/LYXGEoN)|
| 57 | CMLB0212|[Codepen](https://codepen.io/Chungmin0212/pen/zYMBOvX?editors=1100)|
| 58 | 初心#9021|[Codepen](https://codepen.io/Sylviax/pen/GRwNpVB)|
| 59 | PoWei#8484 |[Codepen](https://codepen.io/harrison-wei-lai/pen/mdQpezG?editors=0110)|
| 60 | 小明#4408 |[Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/yLQEZmM)|
| 61 | betty#0693 |[Codepen](https://codepen.io/betty-hu/pen/BaGOpyg?editors=0100)|