鐵人檔案
每年的鐵人賽，廣義的對我來說也算是一種朝聖之路
一場身心靈的考驗，必須面對興奮、無聊、挫折、疲乏等情緒的到來
回顧在學習成為前端路上，CSS 好像是那個"覺得有趣"的契機點
也許就是這個分歧點，造就現在這個宇宙的產生，也因此有一個此刻 2024/09/15 8:15 正趕著報名鐵人賽的我
沒辦法回到當初的分歧點，但想試著讓自己重頭學習 CSS
在這條曾經匆匆走過的路上，重新尋找新的事物
不為什麽 CSS 考題大全或是什麽面試必考
單純為有趣、為自己而寫
接下來的 30 天預計照著 web.dev 的 Learn CSS 課程，重啟對 CSS 的認識！
概念 Linear gradient 線性漸層 .element { background: linear-gradient(black, white)...
概念 keyframe keyframe 用來描述影格/畫面的狀態，使用 @keyframes 這個關鍵字 /* animation-name 為自訂名稱 */...
概念 blur 套用高斯函數做模糊化，傳入 radius 值，必須包含長度單位，不接受百分比。 .element { filter: blur(0.2e...
概念 當混合多個圖層或是顏色怎麼處理重疊相交的部分，相關屬性有 mix-blend-mode和background-blend-mode。 每一種圖層混合模式都...
概念 三種 List <ul>、<ol> 以及 <dl> <!-- Unordered Lists --> &l...
概念 在網頁中許多元素都會有狀態，例如： dropdown 會有開啟和關閉的狀態、按鈕會有 focused 或是 hovered 的狀態，利用 CSS tran...
概念 text-overflow 使用在包含文字節點的元素上，例如：<p>，用來表示當空間不夠文字放時，應該怎麼處理文字的顯示。 p { t...
概念 從最上層依序為：content box、padding box、border box、background box、shadow box，backgrou...
概念 @font-face @font-face 用來定義字型，可從載入外部資源或是 local 端的字型檔。 範例： @font-face { font-...
回顧 今年壓線到最後一刻才決定好主題，一篇備稿都沒有就報名了 也許是不想讓參賽的紀錄中斷也許是不想讓自己缺席這個一年一度的盛事 跟著 web.dev 的 CSS...
