1. 호환성
효과가 좋고 나쁨을 떠나 가장 중요한 것은 호환성입니다. 결론: IE 브라우저를 고려하지 않아도 된다면 border-image를 안심하고 사용할 수 있습니다. 자세한 내용은 caniuse를 확인하세요.
낮은 버전의 Android와 iOS Safari에서는 벤더 프리픽스(vendor prefix)를 추가해야 작동하며, Opera 역시 프리픽스가 필요합니다. 따라서 최적의 호환성을 위해 -ms-를 제외한 모든 프리픽스를 추가해야 합니다. (IE11/IE Mobile 11은 표준 명세를 직접 지원하며, [11 미만] 버전은 전혀 지원하지 않습니다.)
2. 구체적인 문법
자주 사용되는 작성 방식:
border-image：url("bd.png") 10 20 30 40 repeat;
border-width: 10px 20px 30px 40px;
주의: 10 20 30 40은 분할 위치이며, px, em 등의 단위를 붙일 수 없고 오직 숫자(기본 단위는 px) 또는 백분율만 가능합니다. 예시 코드는 상단에서 10px, 우측에서 20px, 하단에서 30px, 좌측에서 40px 지점에 절단선이 있음을 의미하며, 네 번의 절단으로 9분할(나인 패치)을 만듭니다. 이 네 개의 매개변수는 1개, 2개 또는 3개로 축약할 수 있으며, 규칙은 border-width와 동일합니다. 속성명은 border-image-slice입니다.
반복 속성이 기본값인 stretch인 경우, 9분할된 후 네 모서리는 변하지 않고 나머지 칸의 내용은 늘어납니다(stretch).
repeat 매개변수 또한 독특합니다. no-repeat가 존재하지 않으며, 오직 repeat(반복), round(평포), stretch(늘리기)만 있습니다. 기본값은 *stretch(늘리기)*입니다. round와 repeat의 차이점에 주의하세요:
비유를 들어보겠습니다. 여러분이 부동산에서 99.5m*99.5m 크기의 아파트를 샀고 바닥에 타일을 깔려고 합니다. 타일은 모두 1m*1m 정사각형입니다. 만약 "round(평포)"라면, 미안하지만 이 1m 변의 타일은 그대로 쓸 수 없습니다. 처리를 해야 하죠! 어떻게 처리하냐고요? 간단합니다. 각 타일을 0.995m*0.995m로 압축하면 됩니다. 그러면 타일이 딱 맞게 영역을 가득 채우게 됩니다. 반면 repeat(중복)이라면, 그냥 1m*1m 타일을 한쪽 구석에서부터 하나씩 놓습니다. 그러다 끝부분이 남으면 어떻게 할까요? 그냥 타일을 중간에서 "싹둑" 잘라버립니다. 그래서 결국 집의 구석에는 반 토막 난 타일들이 보이게 됩니다.
(출처: CSS3 border-image 상세 설명, 응용 및 jQuery 플러그인 ? 장신쉬-신공간-신생활)
3. 팁
1. border-width와 border-image-slice 값을 동일하게 유지하기
이미지가 여러 번 확대/축소되면서 발생하는 왜곡을 방지할 수 있습니다.
2. 양쪽 끝을 고정하고 중간만 늘리는 방법
탭 메뉴의 레이블처럼 양쪽 끝은 형태를 유지하고 중간 부분만 늘려야 할 때가 있습니다. 해결 방법은 다음과 같습니다:
-
먼저
border-image-slice의 top/bottom 값을 이미지 높이와 같게 설정하고, bottom/top 값을 0으로 설정합니다. 이렇게 하면 9분할에서 2행(중간 행과 하단/상단 행)이 사라집니다. 남은 한 행이 바로 상단 행/하단 행이 되어 좌우 양 끝이 고정됩니다. -
그런 다음
border-width의 값을border-image-slice와 동일하게 설정합니다. -
자식 요소를 부모 요소에 대해 절대 위치(
position: absolute;)로 지정하고 음수margin을 설정합니다 (자식 요소를 부모 요소의 테두리 위에 배치합니다).부모 요소의 테두리가 이미 자식 요소의 위치를 점유하고 있으므로, 자식 요소에
position: absolute;를 설정하여 표준 문서 흐름에서 벗어나 공간을 차지하지 않도록 해야 합니다.
3. 가운데 칸 채우기
표준 border-image 구현에서는 가운데 칸이 채워지지 않지만, -webkit- 구현에서는 채워집니다. 따라서 모든 환경에서 가운데 칸이 채워지도록 하려면 fill 키워드를 사용해야 합니다:
-moz-border-image: url("../img/btn-half.png") fill 36 20 0 20;
-o-border-image: url("../img/btn-half.png") 36 20 0 20;
-webkit-border-image: url("../img/btn-half.png") 36 20 0 20;
border-image: url("../img/btn-half.png") fill 36 20 0 20;
Opera와 Chrome의 방식은 일치하지만 표준 사양과는 다르며, Mozilla는 표준 구현을 따릅니다.
아직 댓글이 없습니다