直接在.card上加clip-path会裁掉padding和边框，因其作用于border box；应改用伪元素承载裁剪，确保内容不受影响，并严格按顺时针、全百分比、无空格书写polygon坐标。
直接在.card上加clip-path会切掉padding和边框
Bootstrap 的 .card 默认有 padding: 1.5rem 和 border，而 clip-path 作用于 border box —— 这意味着你写的 polygon(0 0, 100% 0, 100% 80%, 0 100%) 会把顶部 padding、右侧 border 甚至底部内容一起裁掉，文字上移、按钮错位是常态。
实操建议：
- 不要直接写 .card { clip-path: polygon(...) }
- 改用伪元素承载裁剪：给 .card 加 position: relative; overflow: hidden;，再通过 ::before 绘制裁剪层
- 伪元素必须设 content: ""、position: absolute、inset: 0，并双写 -webkit-clip-path
- 真实内容（标题、正文、按钮）保留在原始 DOM 层级，不受裁剪影响
斜角/梯形卡片的polygon坐标怎么写才不翻车
写 polygon() 最容易踩坑的是顶点顺序和单位混用。比如想做右下斜切角，有人写 polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%)，看似合理，但 Safari 可能因空格或顺序问题直接不渲染。
安全写法：
- 严格按顺时针顺序列点：0% 0%, 100% 0%, 100% 85%, 85% 100%, 0% 100%
- 全部用百分比，禁用 px 或混合单位（如 100% 20px）
- Safari 要求更严：逗号后不留空格，写成 polygon(0% 0%,100% 0%,100% 85%,85% 100%,0% 100%) 更稳
- 如果卡片宽高不固定，务必提前设 aspect-ratio: 4 / 3 或显式 width/height，否则百分比坐标会按视口计算
hover动效别直接transition clip-path
对 clip-path 做 CSS transition 在 Chrome 表现尚可，但在 Safari 上极易卡顿、掉帧，尤其当卡片内有图片或文字时。这不是 bug，而是浏览器渲染机制限制：clip-path 变更会触发重绘，且无法硬件加速。
替代方案：
- 把裁剪逻辑“冻结”在基础形状，用 transform: translateY() 或 scale() 移动整个卡片容器来模拟动效
- 若必须变形（如 hover 时斜角变平），改用 CSS 自定义属性传参：clip-path: polygon(var(--p1), var(--p2), var(--p3), var(--p4));，JS 动态更新 --p* 变量
- 配合 will-change: transform 提升合成层，但仅对 transform 有效，对 clip-path 无效
六边形卡片必须配aspect-ratio和object-fit
Bootstrap 卡片本身是矩形容器，想让它显示为正六边形，只靠 clip-path: polygon(50% 0%, 100% 25%, ...) 不够——如果卡片内容区不是正方形，六边形会拉伸变形，图片溢出或压缩。
关键三要素：
- 卡片加 aspect-ratio: 1 / 1（现代浏览器支持），或手动设 width: 300px; height: 300px
- 内部图片用 object-fit: cover + width: 100%; height: 100% 填满
- 若需兼容老浏览器，降级方案不是删 clip-path，而是加 @supports (clip-path: polygon(0 0)) { ... }，里面提供 .rounded-circle 作为 fallback
真正麻烦的不是写对 polygon 坐标，而是记住：clip-path 永远作用于当前盒模型的 border box，而 Bootstrap 的 padding、border、margin 都在这一层里。稍不注意，你裁掉的就不是“形状”，而是用户能看见的内容本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
