CSS实现盒子倒角不规则效果_利用border-radius多个值

border-radius需按1/2/4值规则设置，四角不规则倒角须用"水平/垂直"双值写法，IE11不支持斜杠语法，超尺寸值会被自动裁剪，单位混用和空格错误易致解析失败。border-radius 支持四个角分别设置，但值必须成对或单个很多人试过 border-radius: 10px 20px 30px; 发现右下角没生效------这是因为 CSS 要求四个角的值要么是 1 个（全角统一），要么 2 个（水平/垂直同设），要么 4 个（顺时针：左上、右上、右下、左下）。少写一个，浏览器会自动补全：第三个值缺失时，它会复制第一个值给右下角。想实现不规则倒角，必须给够四个值，且每个角可拆为 水平值 / 垂直值 形式：border-radius: 10px / 5px 20px / 8px 15px / 12px 5px / 6px;这表示：左上角横 10px 纵 5px，右上角横 20px 纵 8px，右下角横 15px 纵 12px，左下角横 5px 纵 6px。用斜杠分隔的"水平/垂直"写法容易被忽略兼容性双值写法（如 10px / 5px）在现代浏览器都支持，但 IE 完全不认。如果你项目还需兼容 IE11，只能退回到单值方案，或用 SVG 替代。立即学习"前端免费学习笔记（深入）"；border-radius: 10px 20px 30px 40px; ------ 所有浏览器都 OK，但所有角都是正圆弧border-radius: 10px / 20px; ------ 横向统一 10px，纵向统一 20px，适合椭圆化整体边缘真正不规则又需兼容老浏览器？得放弃 border-radius，改用 clip-path 或背景图border-radius 超出盒子尺寸时会被裁剪，不是失效当某个角的 border-radius 值超过该角所在方向的半宽或半高（比如左上角设了 50px / 50px，但盒子本身只有 30px 高），浏览器不会报错，而是自动把弧度压到最大可行值------也就是取 min(水平值, 宽度/2) 和 min(垂直值, 高度/2)。 MacsMind 电商AI超级智能客服