B 类能力实测（H5 端）

1. Grid 布局

grid-cols-2

A
B

grid-cols-3

1
2
3

grid-cols-4

甲
乙
丙
丁

2. Sticky（需滚动观察）

sticky 元素 top-52px
占位区域

3. line-clamp 多行截断

line-clamp-2

这是一段很长的文本用于测试多行截断效果。微信小程序中 -webkit-line-clamp 属于条件能力，需要配合 display:-webkit-box 和 -webkit-box-orient:vertical 使用。在不同基础库版本上表现可能不一致，需要真机验证确认。

line-clamp-3

这是另一段很长的文本用于测试三行截断。第一行内容开始。第二行内容继续延伸到这里。第三行内容到这里应该被截断了。如果你能看到第四行的内容说明 line-clamp-3 没有生效。这段文字需要足够长才能触发三行截断的效果所以多写一些。

4. vh 单位

min-height: 25vh

5. backdrop-filter: blur

毛玻璃效果

6. space-y 子元素间距

space-y-2 (8px)

项目 A
项目 B
项目 C

space-y-4 (16px)

项目 X
项目 Y

7. gap-x / gap-y 方向性间距

flex-wrap + gap-x-3 gap-y-2

标签一 标签二 标签三 标签四 标签五 标签六

8. CSS transition

点击按钮切换颜色（transition-colors 300ms）

9. CSS @keyframes 动画

pulse
float

10. overflow-x-auto 横向滚动

卡片 1
卡片 2
卡片 3
卡片 4
卡片 5

11. divide-y 分割线

列表项 1
列表项 2
列表项 3
列表项 4

12. safe-area-inset-bottom

底部按钮（含安全区补偿）