이미지나 그라데이션을 테두리 조각으로 사용합니다.
border-image는 원본을 9개 영역으로 자른 뒤 모서리와 변에 배치합니다. 먼저 실제 border 폭을 지정하고 source, slice, repeat 방식을 조절합니다.
border: 8px solid로 먼저 테두리 두께를 확보하면 border-image가 그 8px 자리에 초록에서 노랑으로 넘어가는 그라데이션을 대신 그립니다. 끝의 1은 원본 가장자리에서 1px씩 잘라 모서리와 네 변에 늘려 붙이라는 slice 값이라, 위아래 변에는 그라데이션이 가로로 펼쳐지고 왼쪽 변은 초록, 오른쪽 변은 노랑 한 색으로 보입니다. fill이 없어서 가운데 영역은 비어 있습니다.
border-image가 그린 테두리는 border-radius로 깎이지 않아 모서리가 각진 채로 남습니다. 둥근 그라데이션 테두리가 필요하면 테두리를 transparent로 두고 배경을 두 겹으로 겹쳐, 위층 단색은 padding-box까지만, 아래층 그라데이션은 border-box까지 칠하는 방법을 씁니다.
border-style과 width가 없으면 border-image가 기대대로 보이지 않을 수 있습니다.
직접 바꿔보세요그라데이션 방향과 slice 값을 바꿔보세요.