内凹圆角边框无法直接用border实现，须用background: radial-gradient或mask在背景层伪造缺角，再通过padding或伪元素模拟边框空间，本质是视觉欺骗。
直接用 linear-gradient 做内切角边框，本质是“骗过视觉”——它不真切边框，而是用渐变在背景层伪造缺角，再靠 padding 或伪元素撑出边框空间。真边框（border）无法被切，这点必须先认清。
为什么不能直接对 border 用 linear-gradient 切角
浏览器里 border 是独立绘制层，background 和 border 不共享渲染通道。linear-gradient 只能作用于 background，所以所谓“切边框”，其实是：让背景在四个角露出父容器底色（或透明），再把内容区域整体向内缩，让 border 看起来像被切了。
- 如果直接给带
border的元素加background: linear-gradient四角切图，border 会完整盖在渐变上，完全看不到效果 - 常见错误是忘记设置
background-repeat: no-repeat，导致渐变平铺、角部错位 - 用
padding模拟边框宽度时，要同步调整background-position，否则切角位置偏移
用 linear-gradient 实现单侧/双侧内切角的写法差异
单侧（如只切右下角）只需一层渐变；双侧（如切右上+左下）需两层；四角全切就得四层，顺序和 background-position 必须严格对应。
- 右下角切角：
background: linear-gradient(-45deg, transparent 15px, #2179f5 0) bottom right - 右上+左下对角切：
background: linear-gradient(-135deg, transparent 15px, #2179f5 0) top right, linear-gradient(45deg, transparent 15px, #2179f5 0) bottom left - 必须配
background-size: 50% 50%，否则切角尺寸失控；background-repeat: no-repeat缺一不可
如何让内切角适配不同尺寸容器
固定像素值（如 15px）在响应式场景下会失准。更稳妥的是用 calc() + em 或视口单位，但要注意：渐变角度与长度单位不兼容，不能混用 vw 和 px 在同一处声明。
- 安全做法：用
em（基于 font-size）替代px，例如transparent 1.2em，配合统一的font-size: 16px可控缩放 - 若必须用响应式，优先考虑
clip-path或mask，它们支持百分比和calc() - 别试图用
background-size: cover—— 它会让多层渐变缩放错乱，切角变形
和 mask / clip-path 方案的关键区别在哪
linear-gradient 方案最轻量，兼容性最好（IE10+），但只能处理静态、无动画需求的切角；mask 支持渐变背景+圆角+动画，clip-path 能做任意多边形，但 iOS Safari 对 clip-path 的 polygon() 动画支持仍不稳定。
- 需要 hover 动画切角大小？选
mask，用mask-size过渡，linear-gradient无法过渡透明色硬边 - 设计稿要求边框带阴影且切角？
linear-gradient+box-shadow会穿帮（阴影盖不住背景缺口），得套伪元素或改用clip-path - 真正要“镂空边框”（即边框本身被切，内部内容透出底层），
linear-gradient做不到，必须上mask或 SVGborder-image
实际项目中，多数所谓“内切角边框”只是视觉近似，linear-gradient 是最快落地的选择，但它的局限不在写法，而在盒模型理解——一旦想让 border 参与裁剪，就得换轨道。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
