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。
