求助：如何用CSS实现设计图指定的特殊边框样式？

这种带圆角的左右立体边框完全可以用CSS实现，你之前尝试的伪元素思路方向正确，只是需要调整渐变逻辑和定位来匹配设计效果。下面是具体实现方案：

核心思路 #

利用两个伪元素（::before和::after）分别模拟左右两侧的边框，通过线性渐变实现内凹/外凸的光影效果，同时继承主元素的圆角属性实现整体适配。

完整代码示例 #

<div class="custom-border-box">
  这里是内容区域
</div>

.custom-border-box {
  position: relative;
  width: 300px;
  height: 200px;
  border-radius: 40px;
  background: #ffffff; /* 背景色需与页面背景统一，避免伪元素透出 */
  padding: 20px;
  box-sizing: border-box;
}

.custom-border-box::before,
.custom-border-box::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px; /* 边框宽度 */
  border-radius: inherit; /* 继承主元素圆角 */
}

/* 左侧内凹风格边框 */
.custom-border-box::before {
  left: 0;
  background: linear-gradient(to bottom, #888888, #ffffff, #888888); /* 可根据设计调整渐变颜色节点 */
}

/* 右侧外凸风格边框 */
.custom-border-box::after {
  right: 0;
  background: linear-gradient(to bottom, #ffffff, #888888, #ffffff); /* 可根据设计调整渐变颜色节点 */
}

细节调整说明 #

• 若需要更贴合设计的光影层次，可增加渐变色标数量、调整颜色占比，模拟更细腻的明暗过渡。
• 若上下也需要同类边框，可新增伪元素或调整现有伪元素的定位逻辑。
• 确保主元素background与页面背景一致，避免圆角区域出现违和的颜色断层。

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