ボーダー画像生成器

このツールは、ソース、スライス、幅、 outset、リピートモードの 5 つの入力から CSS `border-image` 宣言を生成します。ソースは `url(border.png)` や CSS グラデーションなど、任意の有効な `border-image-source` 値を受け入れます。ライブプレビューボックスは `20px solid transparent` ボーダーで結果をレンダリングし、出力は省略形と個別プロパティの両方で表示されます。

1. ソースをグラデーションまたは `url(...)` に設定します。デフォルトは `linear-gradient(45deg, #f3ec78, #af4261)` です。 2. スライス（デフォルト `1`）、幅（デフォルト `20px`）、outset（デフォルト `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`（タイリングして余分なスペースを配分）。