CSS 경계선 이미지

CSS 경계선 이미지

CSS를 사용하여 border-image 속성은 이미지를 사용하여 요소의 경계선을 설정할 수 있습니다.

CSS border-image 속성

CSS border-image 속성은 일반 경계선을 둘러싸는 대신 사용할 이미지를 지정할 수 있습니다.

이 속성은 3부로 구성되어 있습니다:

  • 경계선으로 사용되는 이미지
  • 이미지를 어디서 잘라냅니다
  • 중앙 부분이 반복되거나 펼쳐지는 위치를 정의합니다

이 이미지를 사용하겠습니다("border.png")

border-image 속성은 이미지를 받아들여 9부로 잘라내려고 하고, 그런 다음 모서리를 모서리에 두고 설정에 따라 중앙 부분을 반복하거나 펼쳐줍니다.

주의:이를 위해 border-image 작동하려면, 이 요소는 설정되어야 합니다 border 속성!

이곳에서 이미지의 중앙 부분을 반복하여 경계선을 만듭니다:

이미지로 경계선!

이 코드는 다음과 같습니다:

예제

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

직접 시험해 보세요

이곳에서 이미지의 중앙 부분을 펼쳐 경계선을 만듭니다:

이미지로 경계선!

이 코드는 다음과 같습니다:

예제

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

직접 시험해 보세요

훌륭한 팁:border-image 속성은 다음 속성의 간단한 단축 속성입니다:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

CSS border-image - 다른 잘라내림 값

다른 잘라내림 값은 경계선의 외관을 완전히 바꿀 수 있습니다:

예제 1:

border-image: url(border.png) 50 round;

예제 2:

border-image: url(border.png) 20% round;

예제 3:

border-image: url(border.png) 30% round;

이 코드는 다음과 같습니다:

예제

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}
#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}
#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}

직접 시험해 보세요

CSS 경계선 이미지 속성

속성 설명
border-image 모든 border-image-* 속성을 설정하는 간단한 속성
border-image-source 정의된 경계선 이미지의 경로
border-image-slice 봉정 이미지를 어떻게 잘라내는지 정의합니다。
border-image-width 봉정 이미지의 너비를 정의합니다。
border-image-outset 봉정 이미지 영역이 봉정 상자 밖으로 확장되는 양을 정의합니다。
border-image-repeat 봉정 이미지를 반복, 둥글게 잘라내기 还是 확장。