CSS Tricks - 你應該知道的 CSS 技巧

做爲一名前端工程師，CSS 是必備技能之一，然而在平常開發中，總有那麼些時候，面對着炫酷的效果圖，腦子裏的 CSS 屬性卻一片空白，因而只能藉助搜索引擎，在一堆複雜的介紹中找到須要的內容複製粘貼。有沒有一個地方，沒有一大堆介紹（我可能只是忘了怎麼拼寫），能讓我直接複製粘貼呢？因而 CSS tricks 應運而生了。

CSS tricks 以最簡潔的語言描述問題或者介紹，總結一些經常使用的技巧和一些經常使用的規範理論。

talk is cheap show me the code

What's included

工具

• 三角形生成器

理論

• 命名規則
• 選擇器
• 僞類和僞元素
• 單位
• 濾鏡 filter
• flexbox
• grid
• object-fit, object-position

動

• 手風琴
• 懸停
• 加載動畫
• 彈簧動畫
• 拋物線

靜

• 清除默認樣式
• 滾動條樣式
• midea 參考
• 手型
• 投影

技巧

• 垂直居中
• 底部自適應
• 三角形邊框
• 文字超出顯示省略號
• 插入換行
• 毛玻璃效果
• 絕對定位寬度自動撐開

文檔： CSS tricks

github： github.com/QiShaoXuan/… star ~）

歡迎提出建設性的意見以及可增長的內容