이미지나 그라데이션을 테두리 조각으로 사용합니다.
border-image는 원본을 9개 영역으로 자른 뒤 모서리와 변에 배치합니다. 먼저 실제 border 폭을 지정하고 source, slice, repeat 방식을 조절합니다.
이번 예제의 출발점은 border-image: linear-gradient(...) 1;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 그라데이션 방향과 slice 값을 바꿔보세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
border-style과 width가 없으면 border-image가 기대대로 보이지 않을 수 있습니다.
직접 바꿔보세요그라데이션 방향과 slice 값을 바꿔보세요.