border-image不重复问题：10px×1px PNG仅显示角落如何解决？

嘿，我看你遇到了border-image没法重复铺满整个边框的问题，咱们来揪出问题所在并搞定它～

问题根源分析 #

你的图片是10px宽 × 1px高的横向小图，但你在border-image的slice参数里写了1 100%——这个参数的顺序是「上、右、下、左」，意味着浏览器会尝试把图片的上下各切1px，左右各切100%。但你的图片高度只有1px，上下各切1px等于把整个垂直方向的内容都切掉了，剩下的有效内容根本没法重复铺满边框的四条边，自然只会在角落出现一点点。

修正后的代码 #

我们需要调整slice参数，同时优化border的样式避免干扰：

#border {
  width: 200px;
  height: 100px;
  border: 1px solid transparent; /* 用solid替代dashed，避免透明边框样式干扰border-image */
  border-image: url(https://image.ibb.co/byABRJ/border.png) 0 10 repeat; /* 关键修改slice参数 */
  background: yellow;
  text-align: center;
  line-height: 100px;
}

<div id="border"> bordered area </div>

关键修改说明 #

• slice参数0 10：表示上下方向不切割（0），左右方向各切割10px（刚好匹配你的图片宽度）。这样浏览器会把图片中间的部分用来重复铺满边框的垂直边，左右的部分作为边框的角落（因为你的图高度只有1px，角落和中间重复部分视觉上是一致的）。
• border样式改为solid：当border是dashed时，透明的边框样式可能会和border-image叠加产生奇怪的显示问题，用solid能让border-image的渲染更稳定。

额外优化建议 #

如果希望图片能刚好铺满边框没有截断，可以把repeat换成round，它会自动调整重复次数让图片完美适配边框长度：

border-image: url(https://image.ibb.co/byABRJ/border.png) 0 10 round;

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