--- tags: 公益程式體驗營 - 2022 --- # 🏅 5/27 (五) 每日切版任務 - position 練習 ## 題目 * 用 Codepen 練習以下畫面，若有不足的尺寸，可試著自行調整為差不多的樣式即可: 謎樣的小提示: box-shadow 不只是打上陰影的作用喔! >**顏色資訊** >![](https://i.imgur.com/KU9Rer1.png) >**相關資訊** ![](https://i.imgur.com/8iRWBlF.png) >**完成圖** ![](https://i.imgur.com/RD59Eb0.png) <!-- ans: [position02](https://codepen.io/DoLucky/pen/abqWLeb?editors=1100) --> --- ## 回報流程 1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報 （也可以將答案直接貼至「回報區」） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答： --> 回報區 --- <!-- 1. yunyun Codepen：https://codepen.io/yun_yunni/pen/eYVyvNP --> <!-- 2. Bruno Yu Codepen：https://codepen.io/bruno-yu/pen/dydJNxb --> <!-- 3. RJRS#9430 Codepen：https://codepen.io/RJRS/pen/mdXpWGw --> <!-- 4. Stanley Codepen：https://codepen.io/sean_1215/pen/RwQxpoR --> <!-- 4. han#9437 Codepen：https://codepen.io/qnrxylcw-the-reactor/pen/wvypdMY --> <!-- 5. Chi Codepen:　https://codepen.io/YoChi84/pen/KKQZWxr --> <!-- 6. Eric.S Codepen：https://codepen.io/Eric_Shen/pen/YzeYVxe --> <!-- 7. Sweet Codepen：https://codepen.io/Pei-Ying/pen/abqEWdZ --> <!-- 8. 楓之聲#6945 codepen: https://codepen.io/sshane258/pen/dydJWqm --> <!-- 9. 小不點#1793 Coedepen:https://codepen.io/fwmfmgkx-the-flexboxer/pen/PoQEjYv --> <!-- 10. ajhappy#6488 Codepen:https://codepen.io/ajhappy5438/pen/bGLaRBV --> <!-- 11.IreneLee codepen:https://codepen.io/ntjtcxpt-the-animator/pen/WNMdONv --> <!-- 12.Noy https://codepen.io/MochiCodingPen/pen/gOvoRGO --> <!-- 13.Tori https://codepen.io/FlyTori/pen/BaYJdLZ --> <!-- 14. shujhen#7734 Codepen：https://codepen.io/shujhen/pen/XWZVarx --> <!-- 15.Joyce https://codepen.io/joycehuang/pen/JjpMyYQ?editors=1100 --> <!-- 16.How#5806 https://codepen.io/howtobefine/pen/MWQrEYN --> <!-- 17. Hao#2485 https://codepen.io/hao216/pen/rNJpzdg --> <!-- 18. LHchien https://codepen.io/lin_chien/pen/mdXpwPg?editors=1100 --> <!-- 19. Peng https://codepen.io/peng-027/pen/PoQEEOj --> <!-- 20. Tuhacrt#0008 Codepen: https://codepen.io/Tuhacrt/pen/JjpMrNW --> <!-- 21. Jason Chen 現在我有冰淇淋 Codepen: https://codepen.io/jason60810/pen/GRQyQRy --> <!-- 22. lyle#8123 Codepen: https://codepen.io/tomys/pen/yLvpvyW --> <!--23. 黑松胖#4836 https://codepen.io/yi-chien-hsieh/pen/VwQyrXN?editors=1100 --> <!--24. 雷雷#7844 https://codepen.io/lei-yi-jie/pen/LYQeByJ --> <!--25. deveryone#8090 https://codepen.io/raycheng/pen/xxYpayb?editors=1100 --> <!--26. yuyu#6310 https://codepen.io/yuyu0905/pen/mdXpBLG?editors=1100 --> <!--27. Knn#0492 https://codepen.io/Knn_84/pen/MWQQWvp --> <!--28. Arista https://codepen.io/arista-hsieh/pen/ZErrEyK --> <!-- 29. JackC Codepen: https://codepen.io/key0329/pen/QWQQwdO --> <!-- 30. Charlotte Lee Codepen: https://codepen.io/charlotte-lee/pen/NWyyqve?editors=1100 --> <!-- 31. Josh Chen#4552 codepen: https://codepen.io/hiphop825/pen/bGLLEWR?editors=1100 --> <!-- 32. Katie codepen: https://codepen.io/Katie24/pen/xxYYVRV --> <!-- 33. 小天#7177 https://codepen.io/linyujing/pen/abqqEBP --> <!-- 34. 眠瀾#8857 CodePen: https://codepen.io/laron9486/pen/poaaprL --> <!-- 35. hw#0715 https://codepen.io/Lhwei/pen/PoQQeJb --> <!-- 35. Cheng-Yu#1813 https://codepen.io/ball77111/pen/VwQQRoN --> <!-- 35. Chaco#2993 https://codepen.io/chaco-wang/pen/WNMMKZv?editors=1100 --> <!-- 36. Muse#9741 https://codepen.io/mu24/pen/oNEEOgV --> <!-- 37. RayChen#6088 https://codepen.io/raychen1996/pen/RwQMNea --> <!-- 38. Ayre#0016 codepen: https://codepen.io/yichunlin09/pen/MWQVKyO --> <!--39. TunacanBoy#2206 https://codepen.io/JamesDesign/pen/vYdRpzO --> <!-- 40. Mitour#0672 codepen https://codepen.io/mitour/pen/qBxoxjb --> <!-- 41. Ryan Lu#3642 codepen https://codepen.io/ryanlu1125/pen/RwQMmwa?editors=1100 --> <!-- 42. Erica Chen#6929 codepen https://codepen.io/ericachen/pen/MWQGarK --> <!-- 43. Greta#0837 codepen https://codepen.io/gretali/pen/yLvjOMR --> <!-- 44. amy芳#1385 codepen https://codepen.io/amy-chieng/pen/GRQdyZa --> <!-- 45. J_u_d_y#5993 https://codepen.io/J_u_d_y/pen/JjpZGZa --> <!-- 46. hsiuhsiu https://codepen.io/hsiuhsiu/pen/ZErRLmb?editors=1100 --> <!-- 47. skypassion5000#4151 https://codepen.io/skypassion5000/pen/bGLKMKV?editors=1100 --> <!-- 47. ling chang#1024 https://codepen.io/ling-chang/pen/vYdraZJ --> <!-- 48. 白狐 Codepen：https://codepen.io/baihu7851/pen/bGLKxqb --> <!-- 49. Vera#5592 Codepen：https://codepen.io/skvera/pen/GRQQqbg --> <!-- 50. Cliff https://codepen.io/Cliff_hex/pen/ZErjByx --> <!-- 51. Cynthia1111 https://codepen.io/Cynthia1111/pen/GRQBNOo --> <!-- 52. Jumpye#8601 https://codepen.io/Jumpye/pen/dydqZZG?editors=1100 --> <!-- 53. 鉦勝 #8333 https://codepen.io/atckmax823/pen/abqRVRe --> <!-- 54. Jamie https://codepen.io/Wu220103/pen/gOvvbxL --> <!-- 55. andersonshen#4675 Codepen：https://codepen.io/luxyenni-the-bold/pen/bGLZape --> [xuan#0808](https://codepen.io/xuan0915/pen/YzeMWLv?editors=1100) <!-- 57. WeiKai Codepen: https://codepen.io/beginneraboutlife116/pen/oNqgNeV -->