如何实现如图所示的双侧渐变边框效果

我需要实现如图所示的双侧渐变边框效果，但目前我的代码如下：

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #ffffff;
}

.module-border-wrap {
  max-width: 320px;
  padding: 1rem;
  position: relative;
  background: linear-gradient(to right bottom, #ffffff, #21BAE3);
  padding: 6px;
}

.module {
  background: #222;
  color: white;
  padding: 2rem;
}

<div class="module-border-wrap"><div class="module">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias.
</div></div>

请问该如何修改代码以实现图中的边框效果？

修改方案 #

要实现图中左右两侧垂直渐变的边框效果，你可以通过以下两种方式调整代码：

方式一：使用伪元素创建独立渐变边框

通过给外层容器添加两个伪元素，分别作为左右两侧的渐变边框：

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #ffffff;
}

.module-border-wrap {
  max-width: 320px;
  padding: 1rem;
  position: relative;
  background: #ffffff;
}

/* 左侧渐变边框 */
.module-border-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(to bottom, #ffffff, #21BAE3);
}

/* 右侧渐变边框 */
.module-border-wrap::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(to bottom, #21BAE3, #ffffff);
}

.module {
  background: #222;
  color: white;
  padding: 2rem;
  margin: 0 6px; /* 给左右边框留出空间 */
}

方式二：使用多背景直接实现

利用CSS多背景特性，在容器左右两侧分别设置渐变背景：

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #ffffff;
}

.module-border-wrap {
  max-width: 320px;
  position: relative;
  /* 定义左右两个渐变背景，分别固定在两侧 */
  background: 
    linear-gradient(to bottom, #ffffff, #21BAE3) left / 6px 100% no-repeat,
    linear-gradient(to bottom, #21BAE3, #ffffff) right / 6px 100% no-repeat;
  padding: 1rem;
}

.module {
  background: #222;
  color: white;
  padding: 2rem;
}

两种方式都能实现图中的双侧渐变边框效果，区别在于伪元素方式更灵活，适合后续调整边框的样式或添加其他效果；多背景方式代码更简洁。

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