CSS 要点记录
不规则图形的阴影（实现对话泡时，三角形拼接在矩形旁）：
filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2));
老虎机动画
1 | 0.5s cubic-bezier(0.75, 0.15, 0.6, 1.15), text-shadow 150ms |
相关链接：
- How to Create a Realistic Motion Blur with CSS Transitions——运动模糊文章；
- 老虎机组件——一个例子。
层叠上下文
相关链接：
块格式化上下文
作用：
- 包含内部浮动；
- 排除外部浮动；
- 阻止外边距重叠。
相关链接：
长度
rem 和 em：
- rem 基于根元素 html 的字体大小；
- em 基于使用 em 的元素的字体大小，要注意很多时候使用 em 的元素的字体大小是继承父元素的。
设置 body 元素的字体大小为“62.5%”，在子元素使用“1rem”就表示“10px”，因为浏览器的默认字体大小是 16px，”16px * 0.625 = 10px“。
相关链接：
图片
相关链接：
- https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image——
<img>和background-image； - object-fit——让 img 和 video 标签能够适应父元素的尺寸。
性能
过于具体的选择器造成性能损耗，因为会递归，所以尽量用扁平选择器。div > a > span不行，span可以。
ほしのかけら
充电动画，blur 相关：https://juejin.cn/post/6844904029336649741。
类名使用连字符、下划线还是驼峰？：CSS，命名上使用 Hyphen (連字號）或許是比 CamelCase 更好的選擇。
延迟 z-index: https://stackoverflow.com/questions/10587842/css3-transitions-how-to-delay-reset-of-the-z-index-property。
border-radius：border-radius 可用于设置圆角半径外，同样可以更细致到设置圆角的水平半径和垂直半径。
pointer-events：浏览器内使用 auto 和 none 两个值，none 禁止指针事件；https://juejin.im/post/6844903495594688525，这篇文章介绍了 3 种使用场景，分别是标签页 active 状态下使用、防止重复请求后台使用和避免重叠的上层元素挡住底层元素事件使用。
待读书籍：