边框图片生成器
免费在线使用 边框图片生成器 无需安装即可使用工具
关于 Border Image 生成器
该工具从五个输入项生成 CSS `border-image` 声明：源、切片、宽度、外扩和重复模式。源接受任何有效的 `border-image-source` 值，如 `url(border.png)` 或任何 CSS 渐变。实时预览框在 `20px solid transparent` 边框上渲染结果，输出同时以简写和完整属性形式显示。
使用方法
1. 将源设置为渐变或 `url(...)`。默认为 `linear-gradient(45deg, #f3ec78, #af4261)`。 2. 设置切片（默认 `1`）、宽度（默认 `20px`）和外扩（默认 `0`）。 3. 选择重复模式：stretch、repeat、round 或 space。 4. 预览实时更新。 5. 点击复制以复制完整 CSS 块，或下载保存为 `border-image.css`。
输出格式和重复模式
输出的简写形式：`border-image: <source> <slice> / <width> / <outset> <repeat>;`。完整块还会单独列出 `border-image-source`、`-slice`、`-width`、`-outset`、`-repeat`，并包含必需的 `border: 20px solid transparent;` 基准。重复模式：`stretch`（默认，缩放边）、`repeat`（不缩放平铺）、`round`（平铺并拉伸以适应完整块）、`space`（平铺并分配额外空间）。
▶为什么没有边框时 border-image 不显示？
`border-image` 需要一个现有边框才能在其上绘制。生成的 CSS 包含 `border: 20px solid transparent;` 正是因为这个原因；删除或调整它，效果就会消失。
▶源字段中可以放什么？
任何对 `border-image-source` 有效的值：图像 `url(...)`、CSS 渐变如 `linear-gradient(...)` 或 `radial-gradient(...)`，或 `none`。默认是 45 度线性渐变。
▶下载按钮保存什么？
它下载一个名为 `border-image.css` 的文件，包含完整的 CSS 块（`.element { ... }`，带有简写、完整属性和透明边框）。
▶round 和 repeat 有什么区别？
`repeat` 以自然尺寸平铺图像，可能在边缘留下不完整的块。`round` 也平铺，但会拉伸块以适应完整数量的块，避免部分截断。
如果这个工具对你有帮助的话，请考虑请我喝杯咖啡。
请给我买杯咖啡吧。