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