clip-path 不裁剪边框，仅裁剪内容与背景；边框仍按原矩形渲染，需用伪元素、background 或 SVG 模拟可裁剪边框。
clip-path 本身不裁剪边框（border），它只裁剪元素的**内容区域和背景**，而边框仍会按原始矩形形状渲染——这是绝大多数人踩坑的第一步。
为什么 clip-path 看起来“没裁到边框”
浏览器规范中，clip-path 作用于「绘制盒」（painting area），但 border 的绘制逻辑独立于该裁剪路径。即使你用 clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)（看似全量），边框依然可能溢出或断裂。
- 边框宽度（
border-width）越大，溢出越明显 -
box-sizing: border-box不改变这一行为 - 使用
outline替代border可被clip-path影响，但outline不占布局空间、不支持圆角、无法单独控制各边
真正能“裁剪边框”的替代方案
想让边框也贴合非矩形轮廓，必须绕过原生 border，改用其他可被 clip-path 控制的绘制方式：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 用
background模拟边框：例如background: linear-gradient(...)或多层background实现内外描边 - 用伪元素
::before/::after+clip-path单独绘制边框层，再叠在主内容上 - 用 SVG
<path>绘制带描边的图形，SVG 原生支持stroke且完全受clip-path控制（推荐用于复杂形状）
.shape {
position: relative;
width: 200px;
height: 150px;
background: #fff;
clip-path: polygon(0 0, 100% 20%, 100% 80%, 0 100%);
}
.shape::before {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border: 4px solid #333;
clip-path: inherit;
pointer-events: none;
}
clip-path 在不同场景下的兼容性注意点
不是所有 clip-path 写法都可靠，尤其涉及边框模拟时：
立即学习“前端免费学习笔记（深入）”；
-
clip-path: inset()对边框模拟最稳定，但仅支持矩形内凹 -
clip-path: polygon()在 Safari 15.4+ 才完整支持百分比坐标；旧版需用绝对像素或calc() -
clip-path: path()（SVG 路径语法）目前仅 Chrome/Firefox 支持，Safari 完全不支持 - 动画
clip-path时，边框模拟层（如伪元素）必须同步动画，否则出现错位
真正要裁剪边框，得放弃“给一个 div 加 border 再 clip”的直觉——边框不是内容，它不参与裁剪流水线。最稳的路是用 SVG，或者把边框变成可裁剪的视觉层。
