如何用CSS制作弧形分割双色调背景（不影响元素布局）

你可以通过**径向渐变（radial-gradient）**轻松实现这种弧形分割的背景效果，完全不会干扰页面内其他元素的布局。核心思路是用一个超大的圆形渐变，通过定位圆心来形成自然的弧形分割线，具体实现方案如下：

方案一：直接给body设置背景 #

这种方式最简单，适合页面没有其他背景需求的场景：

body {
  margin: 0;
  min-height: 100vh;
  /* 核心径向渐变代码 */
  background: radial-gradient(
    circle at bottom right, /* 渐变圆心定位在右下角，可修改位置 */
    #ff6b6b 0%, /* 第一种颜色 */
    #ff6b6b 50%, /* 弧形分割的临界点 */
    #4ecdc4 50%, /* 第二种颜色的起始点，和上面的50%无缝衔接 */
    #4ecdc4 100%
  );
  background-attachment: fixed; /* 固定背景，滚动页面时位置不变 */
}

/* 示例页面内容，证明不影响元素布局 */
.page-content {
  padding: 2rem;
  color: #fff;
  font-size: 1.2rem;
}

方案二：用伪元素实现（更灵活） #

如果页面已有其他背景设置，推荐用伪元素承载渐变背景，避免冲突：

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
}

/* 伪元素作为背景层，放在内容下方 */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 确保背景层在所有内容下方 */
  background: radial-gradient(
    circle at bottom right,
    #ff6b6b 0%,
    #ff6b6b 50%,
    #4ecdc4 50%,
    #4ecdc4 100%
  );
}

.page-content {
  padding: 2rem;
  color: #fff;
  font-size: 1.2rem;
}

效果调整技巧 #

• 改变弧形方向：修改circle at后面的位置值，比如circle at bottom left（左下角弧形）、circle at top right（右上角弧形）、circle at center bottom（底部中间向上凸的弧形）。
• 调整弧形弧度：修改颜色的百分比临界点，比如把50%改成60%，会让第一种颜色的覆盖范围更大，弧形更平缓；改成40%则弧形更陡峭。
• 无缝衔接：确保两种颜色的临界点数值完全一致（比如都是50%），这样就不会出现分割线或边框。

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