CSS의 border-image-slice 속성은 테두리에 사용할 이미지를 잘라내어(슬라이스) 요소의 가장자리에 배치할 때 사용합니다. 이 속성을 활용하면 하나의 이미지만으로도 다양한 크기의 요소에 유연하게 테두리를 적용할 수 있습니다.
border-image-slice 기본 개념
이 속성은 이미지의 위, 오른쪽, 아래, 왼쪽 네 방향에서 각각 안쪽으로 일정 거리만큼 잘라낼 지점을 지정합니다. 값은 픽셀(px) 단위의 숫자 또는 백분율(%)로 설정할 수 있으며, 최대 4개의 값을 사용해 각 변마다 다르게 지정하는 것도 가능합니다.
예제 코드
아래 예제는 border-image-slice 속성을 실제로 적용한 코드입니다. 직접 실행해 결과를 확인해 보세요.
<html>
<head>
<style>
#borderimg1 {
border: 15px solid transparent;
padding: 15px;
border-image-source: url(https://tutorialspoint.com/css/images/border.png);
border-image-repeat: round;
border-image-slice: 40;
}
</style>
</head>
<body>
<p id = "borderimg1">이것은 이미지 테두리 예제입니다.</p>
</body>
</html>코드 설명
- border: 15px solid transparent; — 투명한 테두리 공간을 먼저 확보하여 이미지가 들어갈 자리를 만듭니다.
- border-image-source — 테두리로 사용할 이미지 파일의 경로를 지정합니다.
- border-image-repeat: round; — 잘라낸 이미지 조각이 테두리 영역에 맞도록 반복 배치됩니다.
- border-image-slice: 40; — 이미지의 네 방향 가장자리에서 각각 40픽셀씩 안쪽으로 잘라내어 테두리를 구성합니다.
참고로, 마지막에 fill 키워드를 추가하면 잘라낸 가운데 부분까지 요소의 배경으로 채울 수 있습니다. 예를 들어 border-image-slice: 40 fill;처럼 작성하면 됩니다.