如何用CSS实现左右半高+全宽底部的统一渐变边框

直接用CSS多层背景渐变就能实现你要的效果，不用复杂的伪元素嵌套，代码简洁易维护：

示例代码 #

HTML

<div class="gradient-border-card">
  这里放入你的内容
</div>

CSS

.gradient-border-card {
  /* 基础样式，根据需求调整 */
  padding: 2rem;
  width: 300px;
  margin: 2rem auto;
  background-color: #ffffff;

  /* 核心渐变边框实现 */
  background-image:
    /* 左侧半高渐变边框：位置左，宽度3px，高度50%（居中） */
    linear-gradient(to bottom, #ff7e5f, #feb47b),
    /* 右侧半高渐变边框：位置右，宽度3px，高度50%（居中） */
    linear-gradient(to bottom, #ff7e5f, #feb47b),
    /* 底部全宽渐变边框：位置底，宽度100%，高度3px */
    linear-gradient(to right, #ff7e5f, #feb47b);
  background-size: 3px 50%, 3px 50%, 100% 3px;
  background-position: left center, right center, bottom center;
  background-repeat: no-repeat;
}

自定义调整说明 #

• 改变渐变颜色：直接修改linear-gradient里的色值，比如换成#6a11cb到#2575fc的蓝紫渐变
• 调整边框宽度：修改background-size里的3px数值（左右边框宽度）和最后一个3px（底部边框宽度）
• 调整左右边框的高度/位置：比如想让左右边框从顶部15%开始，高度70%，就把background-size里的50%改成70%，background-position里的center改成top 15%

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