border-radius 直接裁剪 background-image（含渐变），非遮罩而是不绘制超出部分；常见问题为斜向渐变被截断；background-size/position 可缓解；clip-path 更可控且支持动画，如 inset(0 round 12px)。
border-radius 会剪裁 background-image 渐变
圆角不是“遮罩”，而是直接修改元素的渲染边界，所有超出这个边界的背景内容（包括 linear-gradient、radial-gradient）都会被裁掉，不是视觉上盖住，是根本不会绘制。
常见错误现象：background: linear-gradient(45deg, red, blue); border-radius: 12px; 看起来渐变“断在角落”，尤其在小尺寸容器里，斜向渐变的起始点可能直接被裁掉一半。
- 渐变起点默认从左上角开始，
border-radius裁的是整个背景层，不区分颜色或方向 - 如果用
background-size配合background-position调整渐变位置，必须同步考虑圆角裁剪区域——比如background-size: 200% 200%;能让渐变更“宽松”，减少被裁风险 - Firefox 和 Safari 对渐变+圆角的像素级裁剪行为略有差异，Chrome 最严格；同一段代码在不同浏览器里角落过渡可能看起来更“硬”或更“虚”
clip-path 是更可控的替代方案
clip-path 不影响盒模型和事件响应区域，只控制“哪些像素能显示”，对渐变背景的保留更友好，也支持动画。
使用场景：需要圆角但又不想丢渐变细节，比如卡片 hover 时渐变流动、按钮带动态光效。
立即学习“前端免费学习笔记（深入）”；
-
clip-path: border-box;等价于border-radius的裁剪效果，但可配合inset()或path()做微调 - 写成
clip-path: inset(0 round 12px);比直接写border-radius多一层控制权，比如后续想加阴影偏移或动画过渡时更稳定 - 注意兼容性：
clip-path在旧版 Safari（inset() 支持不全，若需兼容 iOS 15 以下，仍得 fallback 到border-radius
background-clip: padding-box 是个折中解
它不改变裁剪区域，而是让渐变“只画在 padding 区域内”，避免内容区（如文字）被渐变干扰，同时保留圆角对边框/背景色的正常作用。
适用条件：你用渐变只是为了底色层次，不追求边缘过渡感，且容器有明确 padding。
-
background-clip: padding-box;+border-radius组合后，渐变不会延伸到边框区域，但圆角依然生效——这意味着渐变边缘不会被裁，只是“止步于 padding 边界” - 如果边框是实色（
border: 2px solid #333;），这个设置会让渐变和边框之间留出干净间隙，比默认的border-box更易控色 - 不能解决“渐变图案本身被圆角切掉”的问题，比如一张带角度的条纹渐变图，只要图案超出 padding 区，照样被截断
真正要保留完整渐变，得靠容器套娃
最稳妥的方式：把渐变放在子元素上，父容器负责圆角和溢出控制，子元素撑满并设 overflow: hidden; —— 这样渐变可以自由绘制，裁剪由父级统一管理。
典型结构：<div class="card"><div class="bg-gradient"></div></div>
- 父容器
.card设border-radius和overflow: hidden; - 子容器
.bg-gradient设width: 200%; height: 200%; margin: -50%;或用transform: scale(2) translate(-25%, -25%);让渐变充分铺开，避免被裁 - 这种写法性能略低（多一层渲染层），但在复杂交互动画中反而更稳定——比如渐变随鼠标移动，直接操作子元素比改父级背景安全得多
border-radius + background-size 就够了。真遇到渐变边缘总被吃掉，先检查是不是起始点太靠边，而不是急着上 clip-path 或套娃——那两个方案各自带着新的边界和兼容性麻烦。 
