🚨Web開發者須要知道的CSS Tricks

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

爲了之後能夠更爽的複製粘貼，筆者把本身的收穫和工做中經常使用的一些CSS小樣式總結成這份文檔，一共包含43個CSS的小樣式（持續更新…）。文檔還有不少不足的地方，還請各位多多指教，若是以爲對你有一點幫助，歡迎你們一塊兒來完善📝~

What's included

邊框與背景

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

常見形狀

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

視覺效果

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

用戶體驗

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

結構佈局

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

動畫過渡

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

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

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

Github：LHammer/You-need-to-know-css(歡迎PR)

小小的吐槽一下：掘金的編輯器/markdown嵌入的badge在移動端爲何沒法顯示？複製代碼