八个滑块分两组

深圳福田"深南前端组"的骆行简，要给卡片做上大下小、横竖错开的椭圆圆角。前四个滑块是水平组，顺时针依次左上、右上、右下、左下，实测填 24、24、12、12；他要的不是"四角一样圆"的普通圆角，得水平与垂直两组一起动。

垂直组才带出斜杠

后四个是垂直组，标签依次"左上垂直 / 右上垂直 / 右下垂直 / 左下垂直"，实测填 16、16、8、8。两组数值一错开，代码就在水平组后面补斜杠和垂直组，这是"高级玩法"的开关。只拖水平滑块时"两边相等"，拼出来的是不带斜杠的四值。

代码写在只读框里

标着"复制 CSS"的文本框实测 readonly，能选中能拷、改不动字，想改数值只能回头拖滑块。实测给出 border-radius: 24px 24px 12px 12px / 16px 16px 8px 8px;，斜杠前四值是水平、后四值是垂直，末尾带分号。旁边可点的按钮叫"复制代码"，两处文案并存，别把标签当按钮。

预览区同步画形状

.zab-preview 把这句 CSS 当场画出来，和只读框里是同一份值，跟着滑块实时变。点"复制代码"走 copyText()，按钮文案临时变"已复制"，1200ms 后恢复。页面不落文件，产物是剪贴板里的一行 CSS；贴进样式表前核一下属性名、斜杠、分号都在。

企业知识网（ www.qiyezhishi.com ）提供的结果为参考性内容，不构成法律、税务或投资建议。具体请以主管部门口径与最新法规为准。