border-radius仅能修饰矩形盒模型的四个角，无法生成三角形、五角星等非四角图形；它作用于border box，无顶点控制能力，真正多边形需clip-path定义骨架，再叠加border-radius柔化顶点。
border-radius 本身不能生成真正“非规则”的几何图形（比如五边形、星形、不等边多边形），它只能修饰矩形盒模型的四个角。所谓“各种图形”，实际是通过组合技巧（如 border + border-radius、clip-path + border-radius）在视觉上模拟出来的近似形状。
为什么单靠 border-radius 画不出三角形或五角星
因为 border-radius 的作用对象永远是元素的 border box —— 一个隐式的矩形。它没有顶点控制能力，也不理解多边形路径。你给一个 div 设置 border-radius: 10px 20px 0 30px，它只会柔化那四个预设角，不会凭空多出第三个角或削掉一边。
常见误解：看到“用 border-radius 画半圆”就以为它能任意裁切。其实那是靠 width/height 不等 + 单侧大 radius 实现的视觉错觉，本质仍是矩形裁角。
- 想画三角形？必须用
border技巧：width: 0; height: 0; border-left: transparent; border-right: transparent; border-bottom: 20px solid red; - 想画五角星？得靠
::before/::after+transform: rotate()叠加，border-radius最多只用来微调尖角弧度 - 想画带圆角的六边形？
border-radius无能为力，必须用clip-path: polygon(...)先定骨架，再叠加border-radius打磨顶点
border-radius 四值与斜杠语法的真实行为
很多人写 border-radius: 10px 20px 30px 发现右下角没变圆，是因为浏览器按三值规则补全：第三个值给右下角，第二个值同时给右上角和左下角 —— 但你漏写了左下角的独立控制，它就被“共享”了。
真正可控的写法只有三种：
- 单值：
border-radius: 8px→ 四角统一 - 四值：
border-radius: 4px 12px 8px 0→ 顺序固定：左上、右上、右下、左下 - 八值（含斜杠）：
border-radius: 4px 8px 12px 16px / 2px 6px 10px 14px→ 斜杠前是各角水平半径，斜杠后是垂直半径
注意：border-radius: 50% / 50% ≠ border-radius: 50%。前者明确指定水平/垂直半径，后者是四值缩写（50% 50% 50% 50%），但在宽高不等时，前者更稳定。
clip-path + border-radius 是实现“带圆角多边形”的唯一可靠路径
当你要一个圆角六边形按钮，或一个顶部圆润、底部尖锐的气泡框，clip-path 负责定义轮廓，border-radius 负责柔化顶点 —— 且渲染顺序是先 border-radius 后 clip-path，所以圆角必须在剪切前存在。
实操要点：
- 用
clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 70%)剪出五边形骨架 - 再加
border-radius: 8px，它会作用于 polygon 每个顶点处的局部矩形区域，产生“圆角顶点”效果 - 若某角需要更大圆角，可尝试增大
border-radius值，但超过该角局部尺寸时会被截断（min(设定值, 局部宽度/2)） - 旧版 Safari 对
clip-path+border-radius组合支持差，建议加overflow: hidden兜底
容易被忽略的兼容性与性能陷阱
看似简单的 border-radius 在复杂场景下极易翻车：
- IE11 完全不支持斜杠语法（
10px / 5px），四值写法虽可用，但无法实现椭圆弧度 -
border-radius值超过元素半宽/半高时，不是报错，而是静默截断 —— 调试时看不出异常，但圆角就是“不到位” - 用
border-radius模拟半圆时，若父容器有padding或子元素margin，交汇点偏移，弧度会歪斜 - 动画
border-radius在低端设备上可能触发重排（尤其是配合transform时），比纯clip-path动画更耗性能
最常被跳过的一步：所有用 border-radius 做图形的元素，都必须显式声明 width 和 height，否则在 flex/grid 容器中尺寸不可控，圆角行为完全不可预测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
