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超级智能客服