[CSS3] border-image를 사용해보자

Android나 IOS 앱을 만들때는 버튼이나 배경이미지 사용시, 해상도에 관계없이 영역을 늘리기위해 나인패치(Nine-Patch) 이미지를 사용했지만 Web에서는 라이브러리를 사용하지 않으면 앱처럼 원하는대로 이미지가 늘어나지 않는다.
But~ CSS3에서 제공되는 border-image 속성을 사용하여 나인패치 효과가 가능하다.

border-image는 아래 속성들의 단축속성이다.
( border-image: source slice width outset repeat|initial|inherit; )

 

border-image-source

/* 키워드 값 */
border-image-source: none;

/* <image> 값 */
border-image-source: url(image.jpg);
border-image-source: linear-gradient(to top, red, yellow);

/* 전역 값 */
border-image-source: inherit;
border-image-source: initial;
border-image-source: unset;

테두리 이미지를 사용하지 않을경우(none)에는 border-style이 대신 표기되므로, 같이 사용해주는편이 좋을 것 같다.

 

border-image-slice

이미지는 모서리에서 지정된 거리만큼 떨어진 4개의 분할선이 영역의 크기를 결정합니다.

/* 모든 방향 */
border-image-slice: 30%;

/* 세로방향 | 가로방향 */
border-image-slice: 10% 30%;

/* 위 | 가로방향 | 아래 */
border-image-slice: 30 30% 45;

/* 위 | 오른쪽 | 아래 | 왼쪽 */
border-image-slice: 7 12 14 5;

/* `fill` 키워드 */
border-image-slice: 10% fill 7 12;

/* 전역 값 */
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: unset;

border-image-slice속성은 최대 4개의 값을 지정할 수 있으며, 각각의 기준 모서리에서
1개는 모두 동일한 거리만큼 떨어진 곳으로  분할선을 설정
2개는 위/아래, 왼쪽/오른쪽 분할선의 위치를 설정
3개는 위, 왼쪽/오른쪽, 아래 분할선의 위치를 설정
4개는 상,우,하,좌 분할선의 거리를 순서대로 지정한다. (padding, margin을 적용할때 사용하는 순서와 동일)

 

border-image-width

/* 키워드 값 */
border-image-width: auto;

/* <length> 값 */
border-image-width: 1rem;

/* <percentage> 값 */
border-image-width: 25%;

/* <number> 값 */
border-image-width: 3;

/* 세로방향 | 가로방향 */
border-image-width: 2em 3em;

/* 위 | 가로방향 | 아래 */
border-image-width: 5% 15% 10%;

/* 위 | 오른쪽 | 아래 | 왼쪽 */
border-image-width: 5% 2em 10% auto;

/* 전역 값 */
border-image-width: inherit;
border-image-width: initial;
border-image-width: unset;

border-image-width속성은 최대 4개의 값을 지정할 수 있으며,
1개는 네면 모두의 너비,
2개는 위/아래, 왼쪽/오른쪽
3개는 위, 왼쪽/오른쪽, 아래
4개는 상,우,하,좌 의 순서로 테두리 너비를 지정한다. (padding, margin을 적용할때 사용하는 순서와 동일)

 

border-image-outset

영역과 border-image의 거리를 설정하는 속성이다.
이 속성으로 인해 영역 바깥에 그려지는 border로는 스크롤이 생기지 않는다.
border-image-outset이 0이면 영역 안쪽으로 border가 그려지며, 수치가 높아질수록 바깥으로 그려진다.

/* <length> 값 */
border-image-outset: 1rem;

/* <number> 값 */
border-image-outset: 1.5;

/* 세로방향 | 가로방향 */
border-image-outset: 1 1.2;

/* 위 | 가로방향 | 아래 */
border-image-outset: 30px 2 45px;

/* 위 | 오른쪽 | 아래 | 왼쪽 */
border-image-outset: 7px 12px 14px 5px;

/* 전역 값 */
border-image-outset: inherit;
border-image-outset: initial;
border-image-outset: unset;

border-image-outset속성은 최대 4개의 값을 지정할 수 있으며,
1개는 네면 모두의 거리를 설정
2개는 위/아래, 왼쪽/오른쪽 거리를 설정
3개는 위, 왼쪽/오른쪽, 아래 거리를 설정
4개는 상,우,하,좌 의 순서로 거리를 지정한다. (padding, margin을 적용할때 사용하는 순서와 동일)

 

border-image-repeat

border에 들어가는 배경이미지를 크기(길이)에 맞춰 조절할 때 사용할 방법을 지정한다.

/* 키워드 값 */
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;

/* 세로방향 | 가로방향 */
border-image-repeat: round stretch;

/* 전역 값 */
border-image-repeat: inherit;
border-image-repeat: initial;
border-image-repeat: unset;

border-image-repeat속성은 최대 2개의 값을 지정할 수 있으며,
1개는 네면 모두 같은 방식을 사용
2개는 위/아래, 왼쪽/오른쪽 면의 방식을 설정한다.

• stretch : border image를 반복없이 늘려서 채운다.
• repeat : border image를 반복하여 간격을 채우며, 크기가 맞지 않으면 마지막 이미지는 잘릴 수 있다.
• round : border image를 반복하여 간격을 채우며, 크기가 맞지 않으면 늘리거나 줄인다.
• space : border image를 반복하여 간격을 채우며, 크기가 맞지 않으면 반복되는 사이를 균등한 공백으로 배치한다.

 

※ 지원되는 Browser 확인하기 

 

---

이해를 돕기 위해.....

if ... 디자이너분들이 자주 사용하는 Round Box를 가로, 세로 길이에 상관없이 하나로 사용하고싶다 !!

1. border image 설정. border-image-source
2. border image로 사용할 이미지를 slice 해야되는데 ... 어떻게?? 
3. 늘어나면 안되는 부분 + 늘어나는 부분으로 나누자. 
   보통 좌상, 우상, 좌하, 우하를 round 처리하니까... 배경이미지를 9조각으로 나눈다.
4. 모서리 꼭지점에서 3번에서 체크된 거리만큼 border-image-slice
5. 이미지 넓이 설정. border-image-width
6. Box로부터 border image를 어디에 위치시킬것인가? border-image-outset ... 이건 뭐 안할 경우가 더 많을지도...
7. 늘어나는 부분이 반복되는 패턴일 경우, 어떻게 채울것인지에 대해서... border-image-repeat
8. 끝