在現今的網頁開發領域，CSS 扮演著不可或缺的角色。為了協助開發者更有效率地掌握CSS技巧，LHammer推出了「You-need-to-know-css」專案，這是一份精心整理的CSS技巧指南，並持續更新中。

專案特色：

  • 快速入門： 開發者可以透過以下方式快速開始使用：

    • 從GitHub倉庫 clone 專案：https://github.com/l-hammer/You-need-to-know-css.git。
    • 使用Docsify進行本地開發：
      • 安裝Docsify：npm install docsify-cli -g（或使用yarn global add docsify-cli）。
      • 運行docsify serve，然後在瀏覽器中打開http://localhost:3000。

  • 內容豐富： 指南涵蓋了多個主題，包括：

    • 邊框與背景： 如半透明邊框、多重邊框、邊框內圓角、背景定位、條紋背景、1px線/邊等。
    • 常見形狀： 圓與橢圓、平行四邊形、切角效果、簡易圓餅圖、提示氣泡等。
    • 視覺效果： 常見投影、不規則投影、毛玻璃效果、斑馬條紋、文字特效、環形文字、插入換行等。
    • 使用者體驗： 選擇合適的懷署游標、擴大可點擊區域、自訂複選框、自訂單選框、輸入框完美居中、通過陰影弱化背景、通過模糊弱化背景、自訂文字下劃線、自訂滾動條等。
    • 結構佈局： 全背景等寬內容居中、絕對底部、水平垂直居中、聖杯佈局、雙飛翼佈局、類訂單佈局、Flex佈局等。
    • 動畫過渡： 彈跳效果、彈性過渡、閃爍效果、打字效果、抖動效果、無縫平滑效果、延軌跡平滑效果等。

「You-need-to-know-css」專案是網頁開發者提升CSS技能的寶貴資源。無論是新手還是有經驗的開發者，都能從中獲益。建議有興趣的開發者前往LHammer的GitHub倉庫，深入了解並應用這些實用的CSS技巧。