作為一名Web開發者，CSS是必備技能之一，我一直以為自己對CSS的掌握已經夠用了，直到讀Lea Verou的《CSS揭秘》時，我發現自己充其量就算個會打CS的選手，書中針對我們常見的網頁設計難題從不同的角度提出了多種實用又優雅的解決方案，在這里強烈的推薦給每一位從事前端相關的開發者，相信你一定會有所收獲。

為了以后可以更爽的復制粘貼，筆者把自己的收獲和工作中常用的一些CSS小樣式總結成這份文檔，一共包含43個CSS的小樣式（持續更新…）。文檔還有很多不足的地方，還請各位多多指教，如果覺得對你有一點幫助，歡迎大家一起來完善?~

What's included

邊框與背景

• 半透明邊框
• 多重邊框
• 邊框內圓角
• 背景定位
• 條紋背景
• 1px 線/邊

常見形狀

• 圓與橢圓
• 平行四邊形
• 切角效果
• 簡易餅圖
• 提示氣泡
• 其他多邊形

視覺效果

• 常見投影
• 不規則投影
• 毛玻璃效果
• 斑馬條紋
• 文字特效
• 環形文字
• 插入換行
• 圖片對比控件

用戶體驗

• 選擇合適的鼠標光標
• 擴大可點擊區域
• 自定義復選框
• 自定義單選框
• 輸入框完美居中
• 通過陰影弱化背景
• 通過模糊弱化背景
• 自定義文字下劃線
• 自定義scroll滾動條

結構布局

• 全背景等寬內容居中
• 絕對底部
• 水平垂直居中
• 圣杯布局
• 雙飛翼布局
• 類訂單布局
• Flex 布局

動畫過渡

• 彈跳效果
• 彈性過度
• 閃爍效果
• 打字效果
• 抖動效果
• 無縫平滑效果
• 延軌跡平滑效果

文檔中代碼支持實時調試預覽，若有疑問或者建議請直接在文檔下方留言，如果你有更有趣更實用的技巧，歡迎PR~

文檔：You-need-to-know-css

Github：LHammer/You-need-to-know-css

總結

以上是生活随笔為你收集整理的?Web开发者需要知道的CSS Tricks的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。