如何实现文本反向圆角？求适配多行标题的CSS方案

针对你要实现的适配多行的文本反向圆角效果，除了伪元素配合inverse-border-radius的方法，还有几个更灵活的方案：

1. CSS Clip-Path 自定义内凹形状 #

这是最直接的纯CSS方案，无需额外元素，能自动适配动态多行内容：

• 用polygon快速实现直线模拟的内凹圆角（适合对曲线要求不高的场景）：

.inverse-round-text {
  padding: 1rem 1.5rem;
  background: #000;
  color: #fff;
  /* 四个角内凹20px，数值可按需调整 */
  clip-path: polygon(
    20px 0,
    calc(100% - 20px) 0,
    100% 20px,
    100% calc(100% - 20px),
    calc(100% - 20px) 100%,
    20px 100%,
    0 calc(100% - 20px),
    0 20px
  );
}

• 如果需要更平滑的内凹曲线，用path()定义贝塞尔曲线：

.inverse-round-text {
  clip-path: path('M20,0 C20,0 0,0 0,20 C0,20 0,calc(100% - 20) 20,calc(100% - 20) C20,calc(100% - 20) calc(100% - 20),calc(100% - 20) calc(100% - 20),100% Ccalc(100% - 20),100% 100%,100% 100%,calc(100% - 20) C100%,calc(100% - 20) 100%,20 calc(100% - 20),20 Ccalc(100% - 20),20 20,20 20,0 Z');
}

2. 逐行反向圆角：Grid布局+背景色块 #

如果要实现类似按钮反向圆角逐行应用的效果（每行文字背景都有内凹），可以用Grid拆分文本行，配合伪元素实现：

.inverse-line-text {
  display: inline-grid;
  gap: 0.3rem;
  line-height: 1.8;
}
.inverse-line-text span {
  position: relative;
  padding: 0 0.8rem;
  background: #000;
  color: #fff;
}
/* 用伪元素做内凹的圆形缺口，颜色和容器背景一致 */
.inverse-line-text span::before,
.inverse-line-text span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 15px;
  background: #fff;
  border-radius: 50%;
}
.inverse-line-text span::before {
  left: -7px;
}
.inverse-line-text span::after {
  right: -7px;
}
/* 首尾行去掉多余的缺口 */
.inverse-line-text span:first-child::before {
  display: none;
}
.inverse-line-text span:last-child::after {
  display: none;
}

使用时需要把文本按行拆成<span>，或者用JS自动拆分，就能实现每行的反向圆角效果。

3. SVG背景实现高精度内凹曲线 #

如果需要更精准的内凹弧度，SVG是最优解，把SVG作为背景图，能完美适配任意尺寸的文本容器：

.inverse-svg-text {
  padding: 1rem 1.5rem;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100"><path d="M20,0 L180,0 C190,0 200,10 200,20 L200,80 C200,90 190,100 180,100 L20,100 C10,100 0,90 0,80 L0,20 C0,10 10,0 20,0 Z" fill="black"/></svg>');
  background-size: 100% 100%;
  color: white;
}

你可以直接修改SVG路径里的数值，调整内凹的弧度和大小，支持透明背景等复杂场景。

内容的提问来源于stack exchange，提问作者Benjamin Seifert