테두리 이미지 생성기

이 도구는 다섯 개의 입력(소스, 슬라이스, 너비, outset, 반복 모드)에서 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`(타일링하고 여분의 공간 분배).