线性渐变边框

Question

我想使用CSS实现这个线性渐变边框 我尝试添加这个：

.demo-mode {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 62.72%);
  box-shadow: inset 0 100vw #111026;
  border: 1px solid transparent;
  border-radius: 24px;
}

但这显示了我的左右边框以及底部边框而不是顶部边框。

.wrapper {
padding: 20px;
background: #111026;
}
.demo-mode {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 62.72%);
  box-shadow: inset 0 100vw #111026;
  border: 1px solid transparent;
  border-radius: 24px;
  width: 250px;
  height: 250px
}

<div class="wrapper">
<div class="demo-mode"></div>
</div>

Answer 1

您可以通过添加来修复它：

background-origin: border-box;

边框
背景相对于边框框定位。

在这里您可以找到有关 background-origin 的更多信息。

示例：

.wrapper {
  padding: 20px;
  background: #111026;
}

.demo-mode {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 62.72%);
  background-origin: border-box;
  box-shadow: inset 0 100vw #111026;
  border: 1px solid transparent;
  border-radius: 24px;
  width: 250px;
  height: 250px
}

<div class="wrapper">
  <div class="demo-mode"></div>
</div>