求助：纯CSS实现平滑弧形/扭曲背景框（Chrome端存在锯齿问题）

我想要实现一个简单的弧形/扭曲背景框效果，但当前实现在Chrome桌面端显示有锯齿，不够平滑。要求采用纯CSS方案，保证HTML可访问性，适配任意背景色与页面底色。

目前尝试用radial-gradient实现，但效果不够平滑；border-radius无法呈现所需的立体弧形效果。原型核心CSS代码如下：

background: radial-gradient(500rem at 3rem -248rem, transparent 50%, brown 50%);

完整示例代码：

body {
  background: linear-gradient(45deg, #07edd0, #acf932) 100% 100% fixed;
}

.box1 {
  width: 30em;
  height: 10em;
  background: brown;
  position: relative;
  color: white;
  padding: 2rem;
  margin: 4rem;
  &::before,
  &::after {
    content: "";
    height: 2rem;
    position: absolute;
    left: 0;
    width: 100%;
  }
  &::before {
    background: radial-gradient(500rem at 3rem -248rem, transparent 50%, brown 50%);
    top: -2rem;
  }
  &::after {
    background: radial-gradient(500rem at 3rem 250rem, transparent 50%, brown 50%);
    bottom: -2rem;
  }
}

<div class="box1">
  <h1>Hello</h1>
  <p>
    Some content
  </p>
</div>

核心优化措施 #

• 替换超大尺寸径向渐变，改用百分比参数控制渐变过渡，避免渲染锯齿
• 添加轻量模糊配合缩放，实现平滑边缘同时不影响内容清晰度
• 用CSS变量统一管理颜色，方便适配任意背景色

优化后代码 #

body {
  background: linear-gradient(45deg, #07edd0, #acf932) 100% 100% fixed;
}

.box1 {
  --box-bg: brown; /* 统一颜色变量，便于修改适配 */
  width: 30em;
  min-height: 10em;
  background: var(--box-bg);
  position: relative;
  color: white;
  padding: 2rem;
  margin: 4rem;
  z-index: 1; /* 确保内容层级高于伪元素 */
}

.box1::before,
.box1::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2rem;
  z-index: -1;
  /* 抗锯齿优化：模糊边缘后轻微缩放，保证形状完整 */
  filter: blur(1px);
  transform: scale(1.005);
}

.box1::before {
  top: -2rem;
  /* 用circle+百分比替代超大固定值，过渡更自然 */
  background: radial-gradient(circle at 3rem 100%, transparent 49.5%, var(--box-bg) 50%);
}

.box1::after {
  bottom: -2rem;
  background: radial-gradient(circle at 3rem 0%, transparent 49.5%, var(--box-bg) 50%);
}

<div class="box1">
  <h1>Hello</h1>
  <p>
    Some content
  </p>
</div>

说明 #

1. 渐变参数优化：将超大尺寸的径向渐变改为circle类型，用49.5%和50%的临界点差，让边缘过渡更柔和，避免硬边导致的锯齿
2. 抗锯齿处理：filter: blur(1px)模糊伪元素边缘，transform: scale(1.005)抵消模糊带来的形状收缩，保证弧形完整且平滑
3. 可访问性：保持原HTML结构，内容层级清晰，不影响屏幕阅读器识别
4. 适配性：修改--box-bg变量即可快速更换盒子颜色，自然适配任意页面底色

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