1
Border radius
检测圆角变化，包括每个角的单独值和百分比半径。
25 测试用例
边框与阴影
边框与阴影并非装饰性细节：它们构建深度感知，将可点击区域与信息区域区分开，并赋予 design system 中各组件以辨识度。当一个站点上所有卡片的 border-radius 从 12px 变为 0 时，整个视觉识别从「现代而温暖」的氛围切换到「刚硬」的呈现，而功能测试不会发出任何信号。在业务型界面上，主操作按钮被去除阴影后看起来扁平且不易识别，会导致误操作。这一类回归通常源于为解决某个独立问题引入的 CSS reset、被认为无用而清理掉的 box-shadow、staging 与生产之间加载顺序的差异改变了级联，或表格上未配合 border-collapse 添加边框，从而产生不规则的双重边框。outline 与无障碍分隔符也会受到全局重构的影响，并直接影响 focus 可视性。Delta-QA 通过比较每个新版本的基准截图来处理该类别：像素级分析检测圆角变化、阴影的出现或消失、线条粗细变化和边框颜色修改。视觉 diff 精确定位每张外观发生变化的卡片、按钮和分隔符，使您能够验证一次高度或圆角 token 的重构，无需逐一手动比较组件，确保设计系统视觉回归测试的可靠性。
我们检测什么
2
Box shadow
捕捉阴影偏移、模糊、扩展和颜色修改，包括多层阴影。
3
Outline
监控 outline-style、outline-color、outline-width 和 outline-offset 变化。
4
边框样式和宽度
检测 solid、dashed、dotted、double 边框之间的变化和每侧的宽度变化。
5
边框颜色
识别单独边框侧的颜色变化，包括透明和继承值。
实际场景
🎯
圆角变方角的卡片
一位开发者在共享组件上添加了 CSS reset，覆盖了网站所有卡片的 border-radius。一夜之间，圆角卡片变成了方角——网站从"现代温馨"变成了"死板严肃"。没人有时间在每次上线前检查 200 个页面。Delta-QA 对比截图，高亮每张卡片从圆角变为方角的变化——形状差异在叠加图中清晰可见。
⚠️
重复出现的边框
一位开发者在表格容器上添加了边框，但没有处理 border-collapse 属性。结果：某些位置出现双重边框——线条粗细不一。表格看起来"坏了"，很不专业。在预发环境中没有问题，但生产环境的样式表加载顺序不同，bug 就出现了。Delta-QA 对比截图，高亮更粗的线条——每条双重边框在差异图中都显而易见。
💡
消失的投影
一位开发者"清理" CSS 时删除了一个他认为无用的 box-shadow。主要操作按钮失去了投影变得扁平——与背景融为一体。按钮不再突出，访客更难注意到它们。这个改动看起来很小——删除一个阴影——没有做视觉审查就合并了。Delta-QA 对比截图，检测到阴影消失——变平的按钮在视觉差异图中清晰可见。