倒角必须用 clip-path 配合多边形坐标实现，border-radius 无法绘制；推荐百分比+calc()动态坐标、CSS变量统一控制倒角长度，并结合渐变与阴影增强立体感。
倒角边缘用 clip-path 还是 border-radius？
直接说结论：倒角（chamfer）不是圆角，border-radius 画不出真正的倒角；必须用 clip-path 配合多边形坐标。浏览器支持已很稳（Chrome 55+、Firefox 54+、Safari 15.4+），但 IE 完全不支持，移动端需注意 Safari 旧版本兼容性。
常见错误是把 clip-path: polygon(...) 写死像素值，结果按钮尺寸一变就错位。正确做法是用百分比坐标，让剪切区域随容器缩放。
- 45° 倒角常用坐标：
polygon(0% 0%, 100% 0%, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0% 100%, 0% 8px) - 其中
8px是倒角长度，可替换成var(--chamfer)方便统一调整 - 别漏掉
calc()—— 直接写100% - 8px会解析失败
立体感靠阴影 + 渐变，不是纯靠剪切
clip-path 只负责裁出倒角外形，真正“立体”得靠视觉层叠：顶部浅色渐变模拟高光，底部深色阴影模拟深度。只裁不加光，按钮看起来还是平的。
- 推荐用
background: linear-gradient(to bottom, #e0e0e0, #b0b0b0)模拟金属/塑料反光 - 加
box-shadow: 0 2px 6px rgba(0,0,0,0.2), inset 0 1px 2px rgba(255,255,255,0.5)—— 外阴影给下沉感，内阴影给边缘高光 - 慎用
text-shadow：按钮文字加阴影容易糊，不如靠背景对比度提升可读性
伪元素模拟立体挤压效果更可控
想做出按下去的“凹陷”效果，纯 CSS 动画改 clip-path 性能差、难对齐。更稳妥的是用 ::before 伪元素盖一层暗色倒角块，点击时下移 + 缩小透明度。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 给按钮设
position: relative，伪元素用absolute覆盖右下边缘 - 伪元素
clip-path和主按钮一致，但背景色更深、opacity: 0.3 - 点击时用
:active把伪元素transform: translate(1px, 1px) scale(0.98) - 避免用
transition动clip-path—— 触发重排且 iOS 上卡顿明显
响应式倒角按钮的坑：百分比坐标在 flex 容器里失效
如果按钮放在 display: flex 的父容器中，clip-path 里的百分比会按父容器宽高计算，而不是按钮自身——导致倒角错位。这不是 bug，是规范行为。
- 解决方法一：给按钮加
position: relative+width: fit-content，切断 flex 主轴拉伸影响 - 解决方法二：改用
clip-path: path("M0,0 H100 V100 H0 Z")（SVG path 语法），但兼容性略差（Safari 15.4+ 才支持 path() 函数） - 调试技巧：临时加
outline: 1px solid red看实际裁剪边界，比肉眼判断准得多
倒角按钮最难的不是写出来，而是让不同尺寸、不同容器环境下的倒角长度保持视觉一致——建议把倒角值抽成 CSS 变量，全局统一调控，别散落在各处硬编码。
