CSS 边框图片生成器

什么是 CSS border-image 属性？

CSS border-image 属性允许您用图片或渐变而非纯色来装饰元素边框。它是一个简写属性，结合了 border-image-source（图片或渐变）、border-image-slice（图片如何分为区域）、border-image-width、border-image-outset 和 border-image-repeat（切片如何平铺或拉伸）。使用渐变，您可以创建鲜艳的多色边框，无需外部图片文件。

所有现代浏览器都支持 border-image，特别适用于创建装饰性框架、渐变边框和超越纯色效果的基于图案的轮廓。

边框切片详解

border-image-slice 属性将源图片（或渐变）分为九个区域：四个角、四条边和一个中心。切片值决定切割发生的位置。较高的切片百分比意味着更多图片用于角部，较低的百分比意味着边缘拉伸更多。使用渐变源时，切片控制多少渐变分配给边框区域与中心。

尝试不同的切片值会显著改变外观：50% 的切片给角和边相等的权重，而 10% 的切片使渐变主要在拉伸的边缘区域可见。

边框图片重复模式

border-image-repeat 属性控制图片边缘区域沿边框如何平铺。CSS 提供四种模式，每种产生不同的视觉效果：

对于渐变，stretch 通常产生最平滑的结果，因为渐变在边框上无缝混合。round 和 repeat 可以创建有趣的图案效果。

何时使用 border-image

当需要比简单纯色更具装饰性的边框时，border-image 是理想选择。常见用例包括英雄区域的渐变边框、图片或卡片周围的装饰框架、标注框的图案边框，以及匹配品牌色调的主题边框。它也适用于创建响应式装饰元素，因为边框随元素缩放而不失真（在 stretch 模式下）。

但是，当需要精确控制每条边时，border-image 不太理想 — 此时请使用单独的边框属性。border-image 统一应用于所有四条边。

如何生成 border-image

本工具让您可视化设计 border-image：设置边框宽度、调整切片百分比、选择重复模式、选择两个渐变颜色和角度。预览实时更新，CSS 代码自动生成。点击"复制 CSS"获取代码并粘贴到样式表。

所有操作都在浏览器中本地运行 — 不会向任何服务器发送数据，您的设计选择完全私密。