使用border-image时如何避免图片顶部角落显示边框？

你的问题出在使用border-image时，它会对所有边框生效（即使你只声明了border-bottom），再加上border-image的宽度设置（30px），导致顶部圆角区域也被填充了边框内容。要实现仅底部显示渐变边框且保留顶部圆角，推荐用伪元素替代border-image，具体方案如下：

方案一：使用容器+伪元素（推荐） #

给图片包裹一个容器，通过容器的伪元素实现底部渐变边框，完全不会影响图片的顶部圆角：

<div class="article-img-wrapper">
  <img src="你的图片地址" alt="图片描述">
</div>

.article-img-wrapper {
  display: block;
  border-top-right-radius: var(--main-border-radius);
  border-top-left-radius: var(--main-border-radius);
  overflow: hidden; /* 确保图片圆角生效 */
  position: relative;
}

.article-img-wrapper img {
  display: block;
  max-width: 100%;
}

/* 底部渐变边框伪元素 */
.article-img-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 30px; /* 边框高度 */
  background: linear-gradient(to left, red, blue);
}

方案二：透明图片专用（背景模拟法） #

如果你的图片是透明底色，可以直接用background-image模拟底部边框，需调整内边距留出边框显示空间：

.articles img {
  display: block;
  max-width: 100%;
  border-top-right-radius: var(--main-border-radius);
  border-top-left-radius: var(--main-border-radius);
  padding-bottom: 30px; /* 预留边框高度 */
  background: linear-gradient(to left, red, blue) bottom / 100% 30px no-repeat;
  box-sizing: border-box;
}

原代码问题说明 #

你设置的border-image: linear-gradient(...) 27 / 30px中，/30px会给所有边设置30px的边框宽度，即便只写了border-bottom: solid 3px，border-image也会覆盖边框样式并应用到所有边；同时border-radius无法作用于border-image，最终导致顶部圆角区域出现多余边框。

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