CSS `border-image` 给文字加可拉伸边框

🎨 最近在学习 CSS 时，发现一个非常有意思的功能：给元素设置带图片的边框 ，而且这个边框还能随着元素尺寸自动拉伸。这个属性叫做 border-image。记录一下，方便以后查阅。

---

✨ 最终效果示例

我使用了一张 SVG 图片作为边框，通过 border-image 让它围绕文字自动拉伸，看起来比普通实线边框更灵动。

css代码：

border: 30px solid #000;
border-image-source: url("../assets/img/Union.svg");
border-image-slice: 30;
border-image-repeat: stretch;

---

🧩 属性详解

1. border

这行是必须的，因为：

• border-image 需要 border-width 作为切图的参考
• 即使你使用的是图片，浏览器也需要一个 border 值

border: 30px solid transparent; /* 你也可以用 transparent */

2. border-image-source

定义边框图片来源。

border-image-source: url("你的边框图片.svg");

可以是 PNG、JPG、SVG，SVG 最灵活。

3. border-image-slice

控制如何把图片切成 9 宫格。

数字越大，切到越靠近中心区域。

border-image-slice: 30;

这和 border: 30px 搭配使用。

4. border-image-repeat

控制边框图片如何填充：

• stretch 拉伸
• repeat 平铺重复
• round 自动缩放为整数个单元
• space 留间距

当前使用的是：

border-image-repeat: stretch;

适合无明显纹理的边框素材。

---

🧪 完整 CSS 示例

.box {
  padding: 20px;
  border: 30px solid transparent;
  border-image-source: url("../assets/img/Union.svg");
  border-image-slice: 30;
  border-image-repeat: stretch;
}

HTML：

<div class="box">
  这是带图片边框的文本，可以随内容自动拉伸。
</div>

---

📌 使用技巧 & 踩坑记录

• 若边框不显示，记得检查 border 是否设置了宽度。
• SVG 非常适合做伸缩边框，不易失真。
• border-image-slice 不一定要等于 border-width，但保持一致最安全。
• 图片太复杂会导致拉伸变形，可以尝试换成 repeat。