如何让子元素无缝继承父级或祖父级的背景渐变

通过统一设置 body 和目标元素（如 .clock）的相同渐变背景，并确保容器无干扰渲染（如 background-color 覆盖、高度塌陷），即可实现视觉上“连续延伸”的线性渐变效果。

在 CSS 中，元素的背景渐变默认是独立绘制的——即使子元素未显式声明 background，它也不会自动“延续”父级或祖父级的渐变；相反，若父容器（如 .border）设置了背景（哪怕是渐变），它会遮挡底层的 body 渐变，导致 .clock 看起来“断裂”。

要实现 .clock 的背景视觉上无缝衔接 body 的渐变，关键不是“继承”，而是复用同一份渐变定义 + 消除中间层的背景干扰。具体需满足三点：

1. body 必须有明确的可渲染高度（如 min-height: 100vh），否则渐变可能不显示；
2. 中间容器（.border）不能覆盖 body 渐变：它应使用 background-image（而非 background）绘制边框装饰渐变，并保持自身背景透明；
3. .clock 与 body 共享完全一致的 background 声明，且不设置 background-color 或其他遮盖性背景属性。

以下是优化后的完整实现：

body {
  margin: 0;
  padding: 0;
  min-height: 100vh; /* 确保渐变铺满视口 */
  background: linear-gradient(180deg, #2a5470 25%, #4c4177 100%);
  background-repeat: no-repeat;
}

/* 让 .clock 与 body 使用完全相同的渐变，形成视觉连续 */
body,
.clock {
  background: linear-gradient(180deg, #2a5470 25%, #4c4177 100%);
}

.border {
  padding: 10px;
  border-radius: 20px;
  /* 仅用 background-image 绘制装饰性斜向渐变，不遮挡底层 */
  background-image: linear-gradient(25deg, #2a5470 25%, #4c4177 100%);
  max-width: 200px;
  margin: 50px auto 0;
}

.clock {
  display: flex;
  flex-directio
n: column;
  align-items: center;
  border-radius: 20px;
  /* 注意：此处不写 background-color！保持透明以透出 body 渐变 */
}

/* 文字样式增强可读性 */
h2,
.clock div {
  color: #fff;
  margin: 0;
}

.clock div {
  font-size: 50px;
}

  
    
      
Break/Session
      25:00
    
  

✅ 效果说明：.border 的 background-image 仅作为装饰层（类似“带渐变的边框”），而 .clock 和 body 共享同一渐变函数与色标，配合 border-radius 对齐，使颜色过渡在视觉上自然连贯。

⚠️ 注意事项：

• 切勿给 .border 或 .clock 设置 background-color: white 或 background: #fff，这会彻底中断渐变传递；
• 若 .border 需要真实背景色，请改用伪元素（::before）叠加渐变边框，保留主内容区域透明；
• 移动端需额外测试 100vh 在 Safari 中的行为（可考虑 100dvh 替代）。

这种方案本质是「视觉对齐」而非技术继承，简洁、可靠，且完全兼容所有现代浏览器。