css如何实现圆角内凹效果

圆角内凹效果是前端界面设计中常见的视觉表现，常用于卡片边缘、按钮边框、容器背景等场景，能让组件看起来更有层次感和立体感。实现这个效果不需要依赖图片或者复杂的JavaScript逻辑，纯CSS就能完成。

方案一：使用box-shadow实现内凹阴影

box-shadow属性支持设置内阴影，通过调整阴影的偏移、模糊和扩散范围，可以模拟出圆角内凹的效果，这种方式实现简单，兼容性也比较好。

/* 基础内凹效果样式 */
.inner-concave {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  /* 内阴影实现圆角内凹，第四个值是扩散半径，调整这个值控制内凹深度 */
  box-shadow: inset 0 0 20px 10px rgba(0, 0, 0, 0.2);
  border-radius: 16px;
}

这种方式的内凹效果是整体背景的内凹，适合做容器的整体视觉凹陷，缺点是无法单独控制某个边角的凹陷程度，整体凹陷比较均匀。

方案二：使用径向渐变实现局部内凹

radial-gradient径向渐变可以创建圆形的颜色过渡，通过在内凹的位置设置深色到透明的渐变，能实现更灵活的圆角内凹效果，甚至可以控制内凹的位置和大小。

/* 右下角圆角内凹效果 */
.corner-concave {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  /* 径向渐变设置在右下角，圆形渐变，从黑色半透明过渡到透明 */
  background-image: radial-gradient(circle at bottom right, rgba(0, 0, 0, 0.3) 0%, transparent 70%);
  border-radius: 16px;
}

这种方式可以自由调整内凹的位置，比如把circle at后面的参数改成top left就是左上角内凹，也可以同时设置多个渐变实现多个位置的内凹。

方案三：使用伪元素+定位实现边框内凹

如果需要实现边框位置的内凹效果，比如容器边缘有内凹的缺口，可以使用伪元素创建内凹的形状，再通过定位放到容器的边缘位置。

/* 容器基础样式 */
.border-concave-box {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

/* 伪元素实现内凹缺口 */
.border-concave-box::before {
  content: '';
  position: absolute;
  top: -10px;
  right: 30px;
  width: 40px;
  height: 40px;
  background-color: #fff; /* 和页面背景色一致 */
  border-radius: 50%;
}

这种方式的内凹是物理上的缺口效果，适合做标签、卡片的异形边缘，只需要调整伪元素的位置、大小和背景色，就能匹配不同的页面背景。

三种方案的选择建议

• 如果需要整体背景的内凹立体感，优先选择box-shadow方案，代码最少，兼容性最好
• 如果需要控制内凹的位置和范围，比如只让某个角落内凹，选择radial-gradient方案更灵活
• 如果需要实现边框缺口类的内凹效果，选择伪元素方案，能实现更精准的形状控制

实际开发中可以根据具体的设计需求选择合适的实现方式，也可以组合多种方案实现更复杂的内凹视觉效果。

CSS圆角内凹box_shadowradial_gradient伪元素修改时间：2026-07-09 02:36:19