理解 border-radius 与 box-shadow 的协同机制
基本原理
在 CSS 盒模型中，border-radius 控制元素四角的圆角弧度，而 box-shadow 则在元素外部绘制阴影。两者的配合决定了最终的圆角阴影是否和轮廓一致。
使用 同一个元素 同时应用 border-radius 与 box-shadow，通常就能获得自然的圆角阴影效果；若需要阴影更贴合轮廓，可以在元素外再包一层容器，利用裁剪来实现更复杂的层次感。
/* 基本圆角阴影示例 */
.card {width: 320px;height: 180px;background: #fff;border-radius: 24px;box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
提示：阴影的模糊半径和偏移量决定了“浮起”的视觉强度，增大模糊半径通常会让圆角看起来更柔和。
圆角阴影的实战案例
实现完美圆角矩形卡片
先为容器设置圆角和基础背景，再叠加外部阴影；这样阴影沿圆角边缘均匀投射，达到“浮动卡片”的效果。注意阴影颜色与背景的对比，以确保可读性。
下面的示例展示了一个带圆角和柔和阴影的卡片结构，适合作为博客文章封面或卡片组件的基础。
/* 圆角矩形卡片：基本版 */
.card {width: 320px;height: 180px;background: #ffffff;border-radius: 28px;box-shadow: 0 12px 28px rgba(0,0,0,.25);border: 1px solid rgba(0,0,0,.04);
}
如果想让阴影在不同背景上保持平滑，可以使用渐变背景与圆角组合；阴影将遵循圆角轮廓，不会穿透圆角的内部边界，从而保留整洁的轮廓感。
使用 inset 阴影与渐变背景
要在圆角内部增添光泽或压力感，可以组合 内阴影（inset）与渐变背景；这让边界看起来更有层次，而圆角仍然保持一致。
/* 圆角内阴影与渐变背景的组合 */
.card {width: 340px;height: 200px;border-radius: 32px;background: linear-gradient(#fff, #f5f5f5);box-shadow: inset 0 2px 8px rgba(0,0,0,.08),0 14px 34px rgba(0,0,0,.22);
}
该写法适用于需要“灯光源”效果的卡片，内阴影提升了边角的深度，外阴影则维持浮动感。
快速交互：悬停时的圆角阴影
通过简单的 悬停交互，让阴影从静态变得更明显，提升可点击性与反馈感。关键在于 过渡效果 的平滑以及阴影参数的合理变化。
/* 悬停时放大阴影，保持圆角 */
.card {width: 320px;height: 180px;border-radius: 28px;background: #fff;box-shadow: 0 8px 20px rgba(0,0,0,.22);transition: box-shadow .25s ease, transform .25s ease;will-change: box-shadow, transform;
}
.card:hover {transform: translateY(-2px);box-shadow: 0 14px 28px rgba(0,0,0,.30);
}
悬停效果 能让用户感知交互，但要避免阴影过于强烈而喧宾夺主。
兼容性与优化要点
浏览器兼容性要点
现代浏览器对 border-radius 与 box-shadow 的支持较好，Chrome、Edge、Firefox、Safari 以及移动端浏览器都能正确渲染圆角阴影。为了更稳妥，请避免过于极端的圆角半径以防出现渲染差异。
在较旧的浏览器上，可能需要前缀的历史写法或针对性回退样式，但在主流场景中无需过度忧虑。
/* 可选的前缀回退（历史场景） */
.card {-webkit-border-radius: 28px;border-radius: 28px;-webkit-box-shadow: 0 8px 20px rgba(0,0,0,.22);box-shadow: 0 8px 20px rgba(0,0,0,.22);
}
性能与渲染优化
对于复杂背景和大量相册级别的圆角阴影，使用 will-change 或者使用软件加速会让渲染更平滑；在大量列表项中，避免在滚动时频繁重绘阴影。
一种常用的优化是将阴影放在单独的容器上，而不是对每一个内部元素逐层叠加，这样可以减少重绘次数与合成层数量。
进阶技巧：伪元素实现更丰富的圆角阴影
利用 ::before 与 ::after 形成独立阴影层
通过伪元素可以在不改变原始盒子的前提下，扩展阴影的形状与层级。将伪元素置于原盒子后方，并应用同样的 border-radius，这样阴影就像从圆角轮廓外延伸出来。
/* 使用 ::before 形成独立阴影层 */
.card {position: relative;width: 320px;height: 180px;background: #fff;border-radius: 28px;
}
.card::before {content: "";position: absolute;z-index: -1;inset: 0;border-radius: inherit;box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
该方法的优点是可以将阴影与内容分离，方便做多层阴影、渐变背景等效果，同时保持圆角一致性。
创作更丰富的圆角阴影层次
在复杂组件中，可以通过多层伪元素实现不同方向的光照效果，例如顶端强光、底部阴影等，每一层都设置 独立的阴影参数，组合起来形成自然的柔光和立体感。
/* 多层阴影示例（伪元素叠加） */
.card { position: relative; border-radius: 28px; overflow: hidden; }
.card::before, .card::after {content: "";position: absolute;left: 0; right: 0; bottom: 0; top: 0;border-radius: inherit;pointer-events: none;
}
.card::before {filter: blur(4px);transform: translateY(6px);background: rgba(0,0,0,.15);z-index: -2;
}
.card::after {box-shadow: 0 12px 28px rgba(0,0,0,.25);z-index: -1;
}
通过这样的技巧，阴影与圆角能够在多层级上自然分布，提升整体的现实感。
