CSS实现单侧半宽边框 解决border-image侧边边框消失问题

border-image会完全替换原生border的渲染逻辑，你之前只写了水平方向的单段渐变，垂直方向的左侧边框没有对应的填充规则，才会出现顶边半宽生效、左边框直接消失的问题。硬用border-image实现这种不对称边框需要写多层渐变+复杂的slice参数，调试维护都很麻烦，用伪元素实现是最优解，灵活度高兼容性也好。

原有HTML结构不需要修改，调整CSS样式即可：

/* 清除浏览器默认figure边距，避免边框错位 */
.image-box figure {
  margin: 0;
}
.image-box{
  max-width: 300px;
  position: relative; /* 作为伪元素的定位父级 */
}
.image-box img{
  max-width: 100%;
  width: 100%;
  object-fit: cover;
  box-sizing: border-box;
  /* 只保留左侧全高的原生边框 */
  border-left: 8px solid #000;
}
/* 伪元素实现半宽顶部边框 */
.image-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 68%; /* 修改该值可自由调整顶边长度占比 */
  height: 8px;
  background-color: #000;
}

• 左侧为和图片等高的8px全高黑色边框
• 顶部边框默认占容器宽度的68%，可根据设计需求直接修改伪元素width值调整长度
• 右侧、底部默认无边框，完全匹配目标效果
• 如果需要调整边框粗细，同步修改img的border-left宽度和伪元素的height数值即可

如果一定要用border-image实现，需要配置双层渐变分别对应垂直、水平方向的边框，代码如下，但参数调试成本高，不推荐使用：

.image-box img{
  border: 8px solid #000;
  border-right: 0;
  border-bottom: 0;
  border-image: linear-gradient(to right, #000 68%, transparent 68%) 1 0 0 0,
                linear-gradient(to bottom, #000 100%, transparent 0) 0 0 0 1;
}

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