如何让clock元素延续祖父元素body的线性渐变背景？

问题描述 #

为实现渐变边框，我设置了带有渐变背景的.border容器并调整内边距，但当前.clock的背景是独立的线性渐变，无法和body的渐变自然衔接。希望让.clock的背景延续body的线性渐变，就像没有.border容器包裹时的效果。

当前代码：

body {
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, #2a5470 25%, #4c4177 100%);
}

.border {
  padding: 10px;
  border-radius: 20px;
  background-image: linear-gradient(25deg, #2a5470 25%, #4c4177 100%);
}
.clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, #2a5470 25%, #4c4177 100%); /* How do i make it continue gradient of body? */
  border-radius: 20px;
}

<body>
<div class="border">
  <div class="clock">
    <h2>Break/Session</h2>
    <div>25:00</div>
  </div>
</div>
</body>

解决方案 #

核心思路是让.clock背景透明，同时调整.border的实现方式，用透明边框+背景裁剪来做渐变边框，这样body的渐变就能透过.clock和.border内部区域自然显示，完美衔接。

修改后的完整代码：

body {
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, #2a5470 25%, #4c4177 100%);
}

.border {
  border-radius: 20px;
  /* 用透明边框替代原padding，模拟边框空间 */
  border: 10px solid transparent;
  /* 让渐变仅覆盖边框区域 */
  background: linear-gradient(25deg, #2a5470 25%, #4c4177 100%) border-box;
}
.clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 移除独立背景，让body渐变透出来 */
  border-radius: 20px;
  /* 可选：添加内边距避免内容贴边框 */
  padding: 1rem;
}

<body>
<div class="border">
  <div class="clock">
    <h2>Break/Session</h2>
    <div>25:00</div>
  </div>
</div>
</body>

关键修改说明 #

• 移除.clock的background属性，使其背景透明，body的渐变直接透过显示
• 将.border的padding替换为border: 10px solid transparent，用透明边框模拟原内边距的空间
• 给.border设置background: linear-gradient(...) border-box，让渐变仅覆盖边框区域，内部保持透明，确保body渐变能延伸到.clock区域

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