1. Grid 布局
grid-cols-2
grid-cols-3
grid-cols-4
2. Sticky（需滚动观察）
3. line-clamp 多行截断
line-clamp-2
这是一段很长的文本用于测试多行截断效果。微信小程序中 -webkit-line-clamp 属于条件能力，需要配合 display:-webkit-box 和 -webkit-box-orient:vertical 使用。在不同基础库版本上表现可能不一致，需要真机验证确认。
line-clamp-3
这是另一段很长的文本用于测试三行截断。第一行内容开始。第二行内容继续延伸到这里。第三行内容到这里应该被截断了。如果你能看到第四行的内容说明 line-clamp-3 没有生效。这段文字需要足够长才能触发三行截断的效果所以多写一些。
4. vh 单位
5. backdrop-filter: blur
6. space-y 子元素间距
space-y-2 (8px)
space-y-4 (16px)
7. gap-x / gap-y 方向性间距
flex-wrap + gap-x-3 gap-y-2
8. CSS transition
点击按钮切换颜色（transition-colors 300ms）
9. CSS @keyframes 动画
10. overflow-x-auto 横向滚动
11. divide-y 分割线
12. safe-area-inset-bottom