如何用CSS实现右侧双边框：一条满高，一条从底部起占50%高度？

你需要的是右侧双边框，一条占容器全高，另一条从底部开始仅占50%高度。你当前用border-double和border-image的方式没法实现这个需求——原生双边框样式无法单独控制单条边框的高度，border-image也无法拆分两条线的高度。

推荐用伪元素方案，灵活控制两条边框的尺寸和位置：

HTML 示例 #

<div class="border-double-half-right">容器内容</div>

CSS 实现 #

.border-double-half-right {
  position: relative;
  padding-right: 20px; /* 避免内容贴到边框上，可按需调整 */
  /* 可选：给容器设置高度，方便直观看到效果 */
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 全高的右侧边框 */
.border-double-half-right::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  background-color: rgb(125, 185, 153);
}

/* 从底部开始的半高右侧边框 */
.border-double-half-right::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 8px; /* 调整此值控制两条边框的间距 */
  width: 3px;
  height: 50%;
  background-color: rgb(125, 185, 153);
}

说明 #

• 给容器设置position: relative，作为两个伪元素的定位基准
• ::after伪元素生成全高边框，从容器顶部延伸到底部
• ::before伪元素生成半高边框，从容器底部向上延伸50%高度
• 可通过修改width调整边框粗细，修改right值调整两条边框的间距，颜色保持和你需求一致

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