边框图像生成器
免费在线使用 边框图像生成器 无需安装即可使用工具
關於 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` 也平鋪，但會拉伸區塊以適應完整數量的區塊，避免部分截斷。
如果这个工具对你有帮助，请考虑请我喝杯咖啡。
請幫我買杯咖啡吧。