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

# 🏅 切版任務 Day24 - 選單四角 hover 效果製作

### 題目
今天是實作設計稿中的這個外框部分
>四個角的部分

### 提示
可以透過方形的 border ，增加 `border-bottom: none;` 這類的語法將方形的 border 取消兩邊，就能取得只有兩邊的圖形，在針對四個角去做設定即可得到我們所需的樣子。

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

## 回報流程

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


<!--

參考解答：
https://codepen.io/jmimiding4104/pen/abrZrJQ

-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | Michelle0417 | [Codepen](https://codepen.io/michelle0417/pen/GRajVqG) |
| 2 | Meng | [Codepen](https://codepen.io/menglin1203/pen/wvbzVzR) |
| 3 | 詹姆士 | [Codepen](https://codepen.io/z111048/pen/RwmGXoM?editors=1100)|
| 04 | Tough life | [Codepen](https://codepen.io/hakuei0115/pen/abrmepp) |
| 5 | kawa | [Codepen](https://codepen.io/z83xji6/pen/WNBGVRB) |
| 06 | han | [Codepen](https://codepen.io/iamHanCheng/pen/dyEpxRJ) |
| 07 | Aya | [Codepen](https://codepen.io/NoNameNote/pen/KKLgOZw) |
| 08 | Jiahe | [Codepen](https://codepen.io/Andywang-95/pen/eYadqQg?editors=1100) |
| 09 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/abrmejy) |
| 10 | Chia Pin | [Codepen](https://codepen.io/joker-cat/pen/yLWVBOM) |
| 11 | macihuang | [Codepen](https://codepen.io/macy1215/pen/bGyBbre) |
| 20 | Daphne | [Codepen](https://codepen.io/DaphneShen/pen/jOoVNwy) |
| 21 | Hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/QWRGLpG) |
| 22 | Hailey | [Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/qBGrJpV) |
| 23 | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/MWdbgzV) |
| 24 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/LYobYjp?editors=1100) |
| 25 | JUN_ | [Codepen](https://codepen.io/Jun-L/pen/bGyBGBY) |
| 26 | yunyouob | [Codepen](https://codepen.io/ozkkvlsu-the-animator/pen/VwOmYmr?editors=1100)|
| 27 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/BaeQyQG) |
| 28 | mike_2049 | [Codepen](https://codepen.io/mike2049/pen/vYwyNOL?editors=1100) |
| 29 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/XWwNmBv) |
| 30 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/abrBNJG) |
| 31 | JY | [Codepen](https://codepen.io/jylee0805/pen/RwmoRNr?editors=1100) |
| 32 | s870012 | [Codepen](https://codepen.io/idzrvbnl-the-bashful/pen/QWRGEOx) |
| 33 | Ted | [Codepen](https://codepen.io/bomtovou-the-animator/pen/vYwyXRr) |
| 34 | 小白 | [Codepen](https://codepen.io/xjbowjbr-the-builder/pen/dyEOObj) |
| 35 | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/XWwNNwP?editors=1100) |
| 36 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/MWdbJWG?editors=1100) |
| 37 | jerry | [Codepen](https://codepen.io/sony791210/pen/oNRYwKY) |
| 38 | boin | [Codepen](https://codepen.io/boinji/pen/PovbJov) |
| 39 | easonpan | [Codepen](https://codepen.io/easonpan0904/pen/QWRGqBp) |
| 40 | Mionne | [Codepen](https://codepen.io/neohyntw/pen/ZENBaQj) |
| 41 | 邵 | [Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/jOoVZaV?editors=1100) |
| 42 | Emma | [Codepen](https://codepen.io/huang_L/pen/OJYbQvV) |
| 43 | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/RwmowLK?editors=1100) |
| 44 | KUN. | [Codepen](https://codepen.io/barry91205/pen/qBGqYwp) |
| 45 | Maxine | [Codepen](https://codepen.io/Maxine0713/pen/KKLNxpE)|
| 46 | Shen | [Codepen](https://codepen.io/yan-Shen-the-decoder/pen/wvboQWd)|
| 47 | LiLiLiLi | [Codepen](https://codepen.io/jungang0414/pen/Povbvyq?editors=1100) |
| 48 | Yini Chen | [Codepen](https://codepen.io/CYini/pen/bGyBPKa) |
| 49 | Zander | [Codepen](https://codepen.io/chuangmaster/pen/zYQNrwv) |
| 50 | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/vYwgKgO) |
| 51 | peggy | [Codepen](https://codepen.io/peggy0419/pen/gOJgwyB) |
| 52 | Winnie | [Codepen](https://codepen.io/codepen-io-winnie/pen/YzbNEdq?editors=1100) |
| 53 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/dyENByr?editors=1100) |
| 54 | LYC | [Codepen](https://codepen.io/LY-C/pen/yLWMBGg) |
| 55 | 小趴 | [Codepen](https://codepen.io/papa2415/pen/YzbZVzY)|
| 56 | maruko1105 | [Codepen](https://codepen.io/marukox1105/pen/pomedje)|
| 57 | 勾小勻 | [Codepen](https://codepen.io/qkvyujcc-the-encoder/pen/vYwZJRL)|
| 58 | Anais77 | [Codepen](https://codepen.io/liu-anais/pen/jOowLex) |
| 59 | Anna | [Codepen](https://codepen.io/Anna-Teng/pen/jOoarpj)|
| 60 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/ZENadPG?editors=1100)|
| 61 | hao jing | [Codepen](https://codepen.io/hjxu/pen/YzbYbem?editors=1101)|
| 62 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/vYwjvqW)|

<!-- a標籤content內容auto時候，內容高+上下的padding，總高度無法剛好是32px
解決方法
1.將a標籤 display改為inline-block
2.引入google font也可以得到a標籤高度為32px
3.目前解法
By詹姆士
-->

---

<!--
| num | user | [Codepen]() |
-->