CSS 테두리 이미지

❮ 이전의 다음 ❯

CSS 테두리 이미지

CSS border-image속성을 사용하면 요소 주변의 테두리로 사용할 이미지를 설정할 수 있습니다.

CSS 테두리 이미지 속성

CSS border-image속성을 사용하면 요소 주위의 일반 테두리 대신 사용할 이미지를 지정할 수 있습니다.

속성은 세 부분으로 구성됩니다.

테두리로 사용할 이미지
이미지를 슬라이스할 위치
중간 섹션을 반복할지 확장할지 정의

다음 이미지("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-outsetborder-image-repeat

CSS border-image - 다른 슬라이스 값

다른 슬라이스 값은 테두리의 모양을 완전히 변경합니다.

예 1:

테두리 이미지: url(border.png) 50 라운드;

예 2:

테두리 이미지: url(border.png) 20% 라운드;

예 3:

테두리 이미지: url(border.png) 30% 라운드;

코드는 다음과 같습니다.

예시

#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;
}