卡片、按钮、弹层这些最常见的界面元素，几乎都离不开圆角和投影。两个属性单独用都很简单，可一旦把它们放到同一个元素上，就可能遇到阴影被裁掉、边缘发虚、透明背景出现矩形灰块等奇怪现象。出现这些问题的原因，并不是因为border-radius和box-shadow互不兼容，而是因为开发者对它们的绘制区域和先后顺序理解不够。本文会把这些细节拆开，配合几个可以直接复用的CSS片段，帮你把圆角阴影组合用得稳定又顺手。
box-shadow如何跟随border-radius绘制
先纠正一个常见误区：很多资料说box-shadow是矩形阴影，不会跟随圆角。实际上，CSS规范明确规定，外阴影的形状由边框盒的圆角矩形决定。也就是说，当你给一个元素设置border-radius: 16px，再设置box-shadow: 0 8px 24px rgba(0,0,0,0.15)时，阴影四角也会呈现对应的弧度，而不是直角。理解这一点很重要，因为它决定了我们是否需要额外方案来让阴影贴合圆角。
阴影的实际形状还会受到两个参数影响：扩展半径spread和模糊半径blur。扩展半径会在阴影基础上向外扩散或向内收缩，模糊半径则让阴影边缘软化。扩展半径较大时，圆角看起来会更大，因为每个角都在原基础上外扩。可以用下面的代码观察：
.card {
width: 300px;
height: 180px;
background: #ffffff;
border: 1px solid #e6e6e6;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
这个卡片会得到一个柔和的圆角投影。如果把border-radius加大到50%，box-shadow也会跟着变成胶囊或圆形投影。这说明在标准盒模型下，两者是天然协同的。问题通常出现在元素背景透明、使用了overflow: hidden、或者同时设置内阴影等特殊场景里。
内阴影则不同，它绘制在padding box内部，会被border-radius裁剪，并且默认沿着内边距外边缘向内投射。内阴影的颜色和模糊参数与外阴影一样，但负的扩展半径能让内阴影更贴合内容区域。后续章节会给出内阴影的实际例子。
透明背景与overflow hidden的典型问题
如果某个元素只是作为容器，它本身没有背景色，但希望根据内部内容产生圆角阴影，那么直接给这个容器设置box-shadow会出现一个难看的矩形阴影。原因是box-shadow按照border-box的形状生成阴影，即使背景完全透明，阴影也会覆盖整个矩形区域，而不会只围绕内容。典型例子是头像容器：外层<div>没有背景，里面放一张圆形头像图片。此时给外层加阴影，得到的是一块方形投影。
解决办法有两种。第一种是给容器加一个背景色，哪怕是白色，让阴影和背景一起被圆角裁剪，这样视觉上阴影就围绕圆角内容。第二种是改用filter: drop-shadow，它基于元素实际渲染出来的alpha通道生成阴影，因此会贴合内部图片的轮廓。
.avatar-wrap {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
}
.avatar-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.avatar-shadow {
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
}
这里把drop-shadow加在包裹图片的容器或图片本身都可以，但要注意filter会创建新的层叠上下文，并且每一层filter都会触发一次光栅化，元素较多时性能会下降。对于固定尺寸的小头像问题不大，但大面积的图片列表需要权衡。
另一个高频问题是overflow: hidden会裁剪掉自身的外阴影。如果一个元素同时设置了圆角、外阴影和overflow: hidden，阴影会被限制在padding box内，几乎看不到。正确做法是把overflow: hidden作用在内部子元素上，而不是有阴影的外层容器。比如卡片结构可以拆成外层负责圆角和阴影，内层负责裁剪图片或内容：
.outer {
border-radius: 16px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.inner {
border-radius: 16px;
overflow: hidden;
}
外层不需要overflow: hidden，阴影可以正常展开；内层裁剪溢出内容，同时保持同样的圆角值，避免圆角处内容溢出产生直角。
内阴影与多重阴影的圆角配合
内阴影常用来做按钮按下的凹陷效果、输入框的内嵌描边，或卡片边缘的高光。和外阴影一样，内阴影也会遵循border-radius，但它是在padding box内部绘制的。一个常见写法是模拟轻微浮雕感：
.button {
border: none;
border-radius: 8px;
background: #f5f5f5;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.1);
}
.button:active {
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.18);
}
这段代码使用逗号分隔两个阴影：第一个是内阴影，模拟顶部内边缘的细微暗部；第二个是外阴影，让按钮从背景中浮起。按下时只保留内阴影，视觉上按钮被按进去。由于内阴影会裁切在圆角范围内，所以即使模糊半径再大，也不会溢出到元素外部，这让内阴影在圆角上比外阴影更可控。
多重阴影还可以制造多层光晕或更真实的投影。多个外阴影会从后往前依次叠加，先声明的在下层，后声明的在上层。通常把模糊半径较大、透明度低的阴影放在前面，把小范围、透明度高的阴影放在后面，可以得到更自然的过渡。需要注意的是，多重阴影每增加一层都会增加浏览器的绘制成本，移动端卡片列表里建议控制在两层以内。
当圆角值很小时，比如2px到4px，内阴影的视觉效果可能不明显；当圆角值很大时，例如50%，内阴影的模糊半径也要相应调整，否则边缘会出现过于柔和的灰色，影响按钮的边界感。经验上模糊半径可以设置为圆角半径的1到2倍，再根据实际设计微调。
drop-shadow与box-shadow的选择及性能优化
前面提到透明背景和图片轮廓场景更适合用filter: drop-shadow，但如果元素本身是不透明背景，优先选择box-shadow。原因在于box-shadow的绘制成本通常更低，而且不会触发filter带来的额外层叠上下文和光栅化。相比之下，drop-shadow需要先渲染整个元素的alpha通道，再执行高斯模糊，在动画或高频滚动时容易造成掉帧。
可以这样判断：如果元素的形状完全由border-radius和背景决定，就用box-shadow；如果阴影需要贴合透明PNG或SVG的真实轮廓，就用drop-shadow。两种方式也可以组合使用，但不要在同一个元素上堆叠过多filter，因为滤镜链会按顺序重复处理像素。
.logo {
width: 120px;
height: 120px;
background: url(logo.png) center/contain no-repeat;
filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2));
}
.card {
border-radius: 20px;
background: #fff;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
另一个性能优化手段是把静态阴影做成伪元素或直接使用一张小尺寸的背景图，避免在大量元素上使用高模糊半径。CSS阴影的模糊半径越大，计算量越大，移动端页面中如果几十个卡片都用box-shadow: 0 20px 60px，滚动时会出现明显卡顿。可以把模糊半径降到合理范围，或者用一次性生成的阴影图片平铺。
此外，给阴影添加透明度而不是使用纯黑阴影，会让阴影与不同背景更协调。现代UI普遍使用rgba(0,0,0,0.1)到rgba(0,0,0,0.15)之间的外阴影，配合较大的模糊半径和较小的y轴偏移，能得到更柔和的悬浮感。
总结来说，圆角和阴影的组合并不复杂，关键是明确元素背景、overflow和阴影类型。标准不透明元素直接用border-radius加box-shadow就能得到贴合圆角的投影；透明背景或图片轮廓改用drop-shadow；内阴影和多层阴影分别处理按压态与层次感。掌握这些规则，就能避免大多数圆角阴影组合中的诡异表现。
CSS圆角阴影border-radiusbox-shadow修改时间：2026-09-17 17:52:53