卡斯伯提供的教學資源：
純 CSS 毛玻璃特效 - backdrop-filter 屬性介紹
幾年前的 iOS、MacOS 更新以後，毛玻璃視覺效果越來越受到許多人喜愛，在使用毛玻璃以前，背景與主要的畫面區塊的風格整合是一件麻煩的事情，除了畫面的協調性外，還要維持資訊的傳達性。而毛玻璃可以讓背景的畫面霧化，凸顯上層的主要資訊，並讓背景與整體不致於產生衝突感。 網頁在套用毛玻璃的特效流程近年有...
新手前端也不該犯的錯：圖片變形
網頁常見錯誤的之一：圖片比例變形 當網頁有此錯誤時，會大大的降低網頁的畫面水平，如果是作為一個求職作品，也會被貼上 “不細心” 的標籤，本篇介紹幾種簡單的方式來解決此問題。 以下是原始圖片（圖片來自於 Unsplash，如果失連歡迎與我聯絡）。 .box { height: 400px !i...
Bootstrap 5 格線的運作原理
.box { height: 100px; background-color: #69F0AE; display: flex; justify-content: center; align-items: center; } Bootstrap 4 中我經常會建議學員不要...
怎樣也不會失手的 Bootstrap 格線運用技巧
.box { height: 100px; background-color: #69F0AE; } .form-row>.col, .form-row>[class*=col-] { padding-right: 5px; padding-left: 5px; } .form...
手把手自訂你的 Bootstrap 樣式
Bootstrap 在第四版以後在介紹文檔，說明自己是一個函式庫而不是框架。樣式的框架代表載入後都是基於此架構開發，無論是否喜歡特定的內容，都需要先全盤接受後再自行調整；而函式庫代表你可以選用自己喜歡的部份，並且調整成合適的樣式，相對於框架來說有更高的彈性。 本篇將會依據 Bootstrap 文檔及...