보더 이미지

보더 이미지 (Border Image)

보더 이미지는 IE11 이상 지원한다.

문법

• border-image: source [slice / width / outset repeat] 속기형으로 자주 씀

• border-image-source 필수로 입력

• border-image-slice

• border-image-width

• border-image-outset

• border-image-repeat

• source : url() 함수를 사용하여 이미지 경로를 설정한다.

slice / width / outset

slice

• slice 슬라이스는 이미지의 상(⬆︎), 우(➡︎), 하(⬇︎), 좌(⬅︎) 가장자리 오프셋을 설정한다. (최대 4개) 보더 이미지를 9개 영역으로 나눌(slice) 수 있다. (px 단위 사용 X)

• 예) 슬라이스를 10px로 설정한다. (border-image-slice: 10px;)

• 이미지를 9개의 영역으로 나누었을 때, 꼭지점 영역에 해당하는 부분의 이미지를 상하좌우 10px에 해당하는 부분만큼 잘라서 사용한다.

  /* 위 아래 이미지의 길이가 안맞으면... 사다리꼴 모양이 되는 건가...? 
      상하, 좌우 단위를 통일? 보더 다시 한 번 보기 */
  
  div {
    border: 10px solid #ddd;
    border-image: url();
    border-image-slice: 30; /* 모든 방향 */
    border-image-slice: 10% 30%; /* 세로 가로 */
    border-image-slice: 30 10% 45; /* 위 가로 세로 */
    border-image-slice: 10 15 10 20; /* 위 오른쪽 아래 왼쪽 (시계방향) */
  
    /* fill 키워드는 선택한 이미지를 박스 안의 배경이미지로 사용,
    입력 순서 상관없이 아무데나 키워드 추가 가능*/
    border-image-slice: 10% flii 30%;
  }

width

• 요소의 상/우/하/좌 테두리 이미지 너비(width)를 설정한다. (최대 4개)

• 실제 테두리의 너비는 영향을 받지 않고 이미지는 맨 위에 배치된다.

• border-image 너비가 border-width 보다 클 경우 채우기 영역 또는 내용 영역을 포함한다.

• 단위 없는 값은 요소의 테두리 너비의 배수로 해석된다.

• 테두리 이미지 너비는 기본적으로 테두리 너비와 같다.

outset

• 테두리와 콘텐츠 사이 안쪽 여백 크기 조정

• 테두리 이미지를 주어진 값만큼 패딩(안쪽) 영역을 설정한다. (최대 4개)

• 단위 없는 값을 사용할 경우, 요소의 테두리 너비(width)에 곱하여 오프셋한다.

repeat 설정

• stretch : 기본값, 이미지를 늘린다.

• repeat : 이미지를 반복. 단, 반복되는 이미지의 사이즈가 가로, 세로 길이에 딱 맞지 않아 남거나 모자랄 경우 부자연스럽게 이미지가 잘린다.

• round : 이미지를 반복. 크기가 안맞을 경우 이미지를 늘리거나 줄여서 자연스럽게 연결되게 함.

• space : 이미지를 반복. 크기가 안맞을 경우 공백 처리.

예시

  // 슬라이스 10px 설정, 나머지(width / outset)은 기본값 사용, 가장자리 섹션 stretch 사용
  border-image: url('imageUrl') 10;

  // 각 테두리 방향에서 5% 조각 이미지 사용, 가장자리 반복 설정
  border-image: url('imageUrl') 5% round;

  // 슬라이스 오프셋 ⇒ 순서: 위 오른쪽 아래 왼쪽
  border-image: url('imageUrl') 10 20 30 40;

  // 슬라이스 10px 설정, 테두리를 2배 큰 border-width 값으로 크기 조정, 가장자리 반복 설정
  border-image: url('imageUrl') 10 / 2 repeat;

     /* border-image: url('imageUrl') 10 repeat;
     border-image-width: 2; */

  // 테두리를 2배 큰 border-width 값으로 크기 조정하고
  // 여백 테두리는 1배 border-width 값으로 설정
  border-image: url('imageUrl') 5 / 2 / 1;

  // 4개의 가장자리마다 각기 다른 설정
  border-image: url('imageUrl') 5 8 6 10 / 1 2 1 3 / 0 1 .5 .5;

그레디언트 보더 이미지

<figure>
  <figcaption>CSS 그레디언트 보더 이미지</figcaption>
  <div class="is-gradient">
    <img class="is-rwd" src="//images.unsplash.com/" alt />
  </div>
</figure>

.is-gradient {
  width: 50vw;
  border: 20px solid #f98b14;
  border-image: linear-gradient(-45deg, #00b9e9, #f98b14, #503370) 20;
}

참고

• border-image, W3C

• border-image, MDN

• border-image, Sitepoint

676KB

practice-assets.zip

archive

Open