JavaScript로 이미지 테두리의 안쪽 오프셋 설정하기

이미지 테두리의 안쪽 오프셋(inward offset)을 설정하려면 JavaScript에서 borderImageSlice 속성을 사용하면 됩니다.

borderImageSlice 속성은 테두리 이미지를 어느 지점까지 잘라내어(슬라이스하여) 요소의 테두리에 배치할지 지정합니다. 값은 숫자(픽셀 래스터 이미지의 경우) 또는 백분율(%)로 지정할 수 있으며, 상·우·하·좌 네 방향에 대해 각각 설정할 수도 있습니다.

예제

다음 코드를 실행하면 borderImageSlice 속성이 실제로 어떻게 적용되는지 확인할 수 있습니다. 버튼을 클릭하면 슬라이스 값이 변경되면서 테두리 이미지의 안쪽 오프셋이 조정됩니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            background-color: blue;
            border: 40px dashed;
            border-image: url('https://www.tutorialspoint.com/images/neo4j.png');
            border-image-slice: 50;
            border-image-width: 0 1 1 1;
            border-image-outset: 0;
            border-image-repeat: round;
         }
      </style>
   </head>
   <body>
      <div id="box">
         <p>Demo Text!</p>
      </div>
      <button onclick="display()">안쪽 오프셋 설정</button>
      <script>
         function display() {
            document.getElementById("box").style.borderImageSlice = "20% 20%";
         }
      </script>
   </body>
</html>

코드 설명

CSS에서는 초기 상태로 border-image-slice: 50이 적용되어 있으며, 점선(dashed) 테두리 위에 이미지가 채워집니다.
버튼을 클릭하면 display() 함수가 호출되어 해당 요소의 style.borderImageSlice 값이 "20% 20%"로 변경됩니다.
이처럼 JavaScript를 활용하면 사용자의 동작에 따라 테두리 이미지의 슬라이스 위치를 동적으로 제어할 수 있습니다.