通过统一设置 body 和目标元素（如 .clock）的相同渐变背景，并确保容器无干扰渲染（如 background-color 覆盖、高度塌陷），即可实现视觉上“连续延伸”的线性渐变效果。
在 CSS 中，元素的背景渐变默认是独立绘制的——即使子元素未显式声明 background，它也不会自动“延续”父级或祖父级的渐变；相反，若父容器（如 .border）设置了背景（哪怕是渐变），它会遮挡底层的 body 渐变，导致 .clock 看起来“断裂”。
要实现 .clock 的背景视觉上无缝衔接 body 的渐变，关键不是“继承”，而是复用同一份渐变定义 + 消除中间层的背景干扰。具体需满足三点：
- body 必须有明确的可渲染高度（如 min-height: 100vh），否则渐变可能不显示；
- 中间容器（.border）不能覆盖 body 渐变：它应使用 background-image（而非 background）绘制边框装饰渐变，并保持自身背景透明；
- .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-direction: column;
align-items: center;
border-radius: 20px;
/* 注意：此处不写 background-color！保持透明以透出 body 渐变 */
}
/* 文字样式增强可读性 */
h2,
.clock div {
color: #fff;
margin: 0;
}
.clock div {
font-size: 50px;
}<body>
<div class="border">
<div class="clock">
<h2>Break/Session</h2>
<div>25:00</div>
</div>
</div>
</body>✅ 效果说明：.border 的 background-image 仅作为装饰层（类似“带渐变的边框”），而 .clock 和 body 共享同一渐变函数与色标，配合 border-radius 对齐，使颜色过渡在视觉上自然连贯。
⚠️ 注意事项：
- 切勿给 .border 或 .clock 设置 background-color: white 或 background: #fff，这会彻底中断渐变传递；
- 若 .border 需要真实背景色，请改用伪元素（::before）叠加渐变边框，保留主内容区域透明；
- 移动端需额外测试 100vh 在 Safari 中的行为（可考虑 100dvh 替代）。
这种方案本质是「视觉对齐」而非技术继承，简洁、可靠，且完全兼容所有现代浏览器。
