box-shadow模拟内圆角的本质是用带圆角的内阴影覆盖直角边缘，通过inset、正值spread-radius和blur-radius组合实现柔化效果，不改变border实际形状。
box-shadow 模拟内圆角的原理是什么
本质是用一层带圆角的阴影盖在元素边缘，视觉上“吃掉”直角部分。不是真改变 border 的形状，所以不支持 border-color 渐变或 border-image，也不能响应 hover 时的 border-width 变化。
关键点在于：box-shadow 的 spread-radius 参数为负值时，会向内收缩；配合足够大的 blur-radius 和透明度，就能软化直角边缘，形成类内圆角效果。
常见错误现象：box-shadow: 0 0 10px -4px #000 看不出变化——因为 spread-radius 太小，或颜色太深导致边缘生硬；或者忘了设 overflow: hidden，导致子内容溢出破坏效果。
怎么写一个可用的内圆角 shadow 样式
推荐起手式：box-shadow: inset 0 0 0 4px #ccc（纯色内边框）→ 再叠加模糊：box-shadow: inset 0 0 8px 4px rgba(0,0,0,0.1)。
实操建议：
-
inset必须加，否则是外阴影 -
spread-radius（第四个值）设为正数（如4px），控制“内缩厚度”，数值越大，内圆角越“厚” -
blur-radius（第三个值）决定柔和程度，通常取spread-radius的 1–2 倍 - 颜色用
rgba()控制透明度，避免压住背景纹理或渐变 - 如果容器有
background-clip: padding-box，要确认 shadow 是否被裁切
和 border-radius 冲突时怎么办
直接叠加会看到两层圆角：外层 border-radius 是真圆角，内层 box-shadow 是模拟圆角，容易错位、发虚或重影。
使用场景明确：只在需要「border 本身保持直角」但「内容区边缘要柔化」时才用 shadow 模拟。比如卡片边框需 sharp，但内部文字/图片区域要 soft edge。
此时必须禁用真实圆角：border-radius: 0，否则 box-shadow: inset 会在已圆角的区域内渲染，边缘不齐。
性能影响很小，但 Safari 对负 spread + inset 组合偶尔渲染不稳定，建议测试 iOS 16+ 设备。
哪些情况别硬套这个技巧
它不是万能替代方案。以下情况优先用原生 border-radius 或 SVG：
- 需要精确控制内圆角半径（比如
2px内切），box-shadow只能估算，无法像素级对齐 - 元素有
border且需显示（比如2px solid #333），shadow 会盖住 border 或造成颜色叠加 - 要支持高对比度模式或配色方案切换，
rgba()阴影可能失效或对比不足 - 父容器用了
clip-path或mask，box-shadow: inset可能被裁剪掉
最常被忽略的一点：这个效果依赖背景色——如果父级背景是图片、渐变或透明，box-shadow 的灰度/颜色会直接透出来，看起来像脏边。得先确认背景是否可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
