如何通过CSS/JS实现Div内凹圆角（不新增HTML代码）

CSS 径向渐变方案 #

通过背景径向渐变在四个角生成与背景色一致的圆形区域，覆盖边框角部，模拟内凹效果，无需新增HTML元素。

假设目标Div的类为.box，示例代码如下：

.box {
  /* 基础样式：按需调整尺寸、边框、背景色 */
  width: 200px;
  height: 200px;
  border: 2px solid #000;
  background-color: #fff;
  
  /* 内凹圆角核心配置 */
  --concave-radius: 10px; /* 内凹弧度大小，可自定义 */
  --border-width: 2px;    /* 需与实际边框宽度一致 */
  background-image: 
    radial-gradient(circle at top left, 
      transparent var(--concave-radius), 
      #000 var(--concave-radius), 
      #000 calc(var(--concave-radius) + var(--border-width)), 
      #fff calc(var(--concave-radius) + var(--border-width))),
    radial-gradient(circle at top right, 
      transparent var(--concave-radius), 
      #000 var(--concave-radius), 
      #000 calc(var(--concave-radius) + var(--border-width)), 
      #fff calc(var(--concave-radius) + var(--border-width))),
    radial-gradient(circle at bottom left, 
      transparent var(--concave-radius), 
      #000 var(--concave-radius), 
      #000 calc(var(--concave-radius) + var(--border-width)), 
      #fff calc(var(--concave-radius) + var(--border-width))),
    radial-gradient(circle at bottom right, 
      transparent var(--concave-radius), 
      #000 var(--concave-radius), 
      #000 calc(var(--concave-radius) + var(--border-width)), 
      #fff calc(var(--concave-radius) + var(--border-width)));
  background-size: calc(var(--concave-radius) + var(--border-width)) calc(var(--concave-radius) + var(--border-width));
  background-repeat: no-repeat;
  background-position: top left, top right, bottom left, bottom right;
}

• 修改--concave-radius可调整内凹弧度
• --border-width必须与Div实际边框宽度匹配
• 边框色、背景色替换为你的项目实际配色即可

JS 动态适配方案 #

如果页面中存在多个样式不同的Div（边框宽度、颜色各异），用JS自动读取元素样式生成对应渐变，避免重复编写CSS：

// 替换为你的目标Div选择器
document.querySelectorAll('.box').forEach(box => {
  const style = getComputedStyle(box);
  const borderWidth = parseInt(style.borderWidth);
  const borderColor = style.borderColor;
  const bgColor = style.backgroundColor;
  const concaveRadius = 10; // 统一内凹半径，也可按需自定义
  
  box.style.backgroundImage = `
    radial-gradient(circle at top left, transparent ${concaveRadius}px, ${borderColor} ${concaveRadius}px, ${borderColor} ${concaveRadius + borderWidth}px, ${bgColor} ${concaveRadius + borderWidth}px),
    radial-gradient(circle at top right, transparent ${concaveRadius}px, ${borderColor} ${concaveRadius}px, ${borderColor} ${concaveRadius + borderWidth}px, ${bgColor} ${concaveRadius + borderWidth}px),
    radial-gradient(circle at bottom left, transparent ${concaveRadius}px, ${borderColor} ${concaveRadius}px, ${borderColor} ${concaveRadius + borderWidth}px, ${bgColor} ${concaveRadius + borderWidth}px),
    radial-gradient(circle at bottom right, transparent ${concaveRadius}px, ${borderColor} ${concaveRadius}px, ${borderColor} ${concaveRadius + borderWidth}px, ${bgColor} ${concaveRadius + borderWidth}px)
  `;
  box.style.backgroundSize = `${concaveRadius + borderWidth}px ${concaveRadius + borderWidth}px`;
  box.style.backgroundRepeat = 'no-repeat';
  box.style.backgroundPosition = 'top left, top right, bottom left, bottom right';
});

方案说明 #

• 径向渐变方案兼容性优于clip-path，适配绝大多数现代浏览器
• 完全符合“不新增HTML代码”的限制条件
• 微调渐变颜色节点的数值，可获得更精准的内凹效果

内容的提问来源于stack exchange，提问作者Prakhar Sood