基础CSS特性测试
CSS自定义属性（CSS变量）
如果文字是绿色且大小为20px，说明CSS变量支持正常。
color: var(--test-color);
检测中...
CSS calc() 函数
这个元素的宽度为 calc(100% - 40px)，高度为 calc(50px + 10vw)
width: calc(100% - 40px);
检测中...
Flexbox布局
Flex项目 1
Flex项目 2
Flex项目 3
display: flex; gap: 10px;
检测中...
CSS Grid布局
Grid项目 1
Grid项目 2
Grid项目 3
Grid项目 4
display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
检测中...
CSS函数与高级特性
calc() 与 CSS变量组合
宽度应为 calc(50px * 4) = 200px
width: calc(var(--test-width) * 4);
检测中...
CSS Transform
旋转15度并缩放0.9
transform: rotate(15deg) scale(0.9);
检测中...
CSS渐变
45度线性渐变
background: linear-gradient(45deg, #667eea, #764ba2);
检测中...
CSS阴影
带有阴影的元素
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
检测中...
布局与定位
position: sticky
这是一个 sticky 定位的元素，滚动时应该固定在顶部
向下滚动查看 sticky 效果
继续滚动...
更多内容...
底部内容
继续滚动...
更多内容...
底部内容
position: sticky; top: 0;
检测中...
Flex/Grid gap 属性
项目1
项目2
项目3
gap: 20px;
检测中...
aspect-ratio 属性
宽高比 16:9
aspect-ratio: 16 / 9;
检测中...
动态功能测试
动态更新CSS变量
点击下方按钮改变我的背景色
document.documentElement.style.setProperty('--dynamic-color', '#f00');
检测中...
伪元素 ::before/::after
这个元素前面应该有✅图标
.element::before { content: "✅ 伪元素内容"; }
检测中...
text-wrap: balance (实验性)
这是一个测试文本换行平衡特性的示例段落，用来检测是否支持较新的CSS特性。
text-wrap: balance;
检测中...
兼容性结果汇总
正在生成测试报告...