我如何使 div 继续其祖父母的线性渐变？答案

【问题标题】：How do i make a div continue linear gradient of its' grandparent?我如何使 div 继续其祖父母的线性渐变？
【发布时间】：2023-02-06 18:46:28
【问题描述】：

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>

Here's how it looks now

为了让边框有渐变，我发现我需要用背景做一个单独的div作为这个渐变，然后调整填充。我想要实现的是使 .clock 背景继续身体的渐变，就像它周围没有 .border 一样。

【问题讨论】：

标签： html css background gradient

【解决方案1】：

如果我正确理解了这个问题，那么您需要做的就是将 .clock div 的背景设置为无。

.clock {
  background: none;
}

【讨论】：