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 ~）

欢迎提出建设性的意见以及可增加的内容