如何用CSS实现目标线性渐变边框？当前代码仅显示部分边框

我希望使用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>

但当前效果仅显示左侧、右侧和底部边框，顶部边框未显示。

问题原因 #

box-shadow: inset 0 100vw #111026是从顶部向下填充内部背景，直接覆盖了顶部的渐变边框区域，导致顶部边框无法显示。

解决方案 #

改用双层背景配合background-clip和background-origin属性实现，这是更规范的渐变边框实现方式：

修改后的代码：

.wrapper {
  padding: 20px;
  background: #111026;
}
.demo-mode {
  /* 内部纯色背景 */
  background-color: #111026;
  /* 渐变边框背景 */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 62.72%);
  /* 第一层背景限制在padding区域，第二层延伸到边框区域 */
  background-clip: padding-box, border-box;
  /* 第一层从padding区域开始绘制，第二层从边框区域开始 */
  background-origin: padding-box, border-box;
  border: 1px solid transparent;
  border-radius: 24px;
  width: 250px;
  height: 250px;
}

替代方案（调整阴影写法） #

如果想保留原思路，也可以把阴影改为从四周向内填充，避免覆盖顶部边框：

.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 0 0 100vw #111026; /* 修改此处 */
  border: 1px solid transparent;
  border-radius: 24px;
  width: 250px;
  height: 250px;
}

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