요소의 테두리에는 이전에 소개한 기본 스타일 중 일부를 사용하는 것 외에도 CSS3의 border-image 속성을 통해 이미지를 요소의 테두리로 사용하여 다채로운 테두리 효과를 만들 수도 있습니다.
border-image 속성은 몇 가지 간단한 규칙을 통해 이미지를 9개의 개별 부분으로 나눌 수 있으며, 브라우저는 자동으로 해당 부분을 사용하여 테두리의 기본 스타일을 대체합니다. border-image 속성은 5가지 border-image-* 속성의 약어이며 구문 형식은 다음과 같습니다.
border-image：border-image-source||border-image-slice[/border-image-width|/border-image-width?/border-image-outset]?||border-image-repeat
다음으로, 테두리 이미지 소스, 테두리 이미지 슬라이스, 테두리 이미지 너비, 테두리 이미지 아웃셋 및 테두리 이미지 반복의 사용을 보여주기 위해 아래 그림을 사용합니다.
1. 테두리 이미지 소스
border-image-source 속성은 테두리에 사용할 이미지를 정의하는 데 사용됩니다. 이 속성을 통해 border-image-source 속성의 값이 다음과 같은 경우 테두리의 기본 스타일을 대체할 이미지를 지정할 수 있습니다. 없음 또는 지정된 이미지를 사용할 수 없으면 테두리의 기본 스타일이 표시됩니다.
또한 border-image-source 속성을 사용하여 테두리의 기본 스타일을 이미지로 바꾸는 것 외에도 그라데이션을 사용하여 테두리 스타일을 정의할 수도 있습니다. 속성의 구문 형식은 다음과 같습니다.
테두리 이미지 소스:없음|<이미지>
그중에서 border-image-source 속성의 기본값은 없습니다. 이는 이미지가 테두리의 기본 스타일을 대체하는 데 사용되지 않음을 의미합니다. <image>는 url() 함수를 사용하여 지정된 이미지 경로입니다. 기본 테두리 스타일을 대체하는 데 사용되는 선형 그라데이션() 함수를 사용하여 정의된 그라데이션 색상입니다.
[예] 기본 테두리 스타일을 이미지로 바꾸려면 border-image-source 속성을 사용하세요.
<!DOCTYPEhtml><html><head><style>div{width:200px;border:27pxsolid;padding:10px;border-image-source:url(./img.png);}</style></head ><body><div>기본 테두리를 이미지로 바꾸기</div></body></html>실행 결과:
border-image-source 속성을 사용하는 것만으로는 원하는 효과를 얻을 수 없다는 것을 실행 결과에서 볼 수 있습니다. 몇 가지 다른 기능을 살펴보겠습니다.
2. 테두리 이미지 슬라이스
border-image-slice 속성은 border-image-source 속성을 통해 로드된 이미지를 분할하는 데 사용됩니다. 속성의 구문 형식은 다음과 같습니다.
border-image-slice:[<숫자>|<백분율>]{1,4}&&채우시겠습니까?border-image-slice 속성은 세 가지 유형의 값을 받을 수 있습니다.
1. <숫자>: 숫자 값. 특정 숫자 값으로 이미지 분할 위치를 지정합니다. 숫자 값은 이미지의 픽셀 위치 또는 벡터 좌표를 나타냅니다.
2. <백분율>: 이미지 크기에 대한 백분율입니다. 이미지의 너비는 가로 방향에 영향을 주고 높이는 세로 방향에 영향을 미칩니다.
3. 채우기: 테두리 이미지의 중간 부분을 유지합니다.
border-image-slice 속성은 상하좌우 4방향을 지정하여 이미지를 분할할 수 있으며, 이미지를 모서리 4개, 측면 4개, 중간 영역을 포함하여 9개 부분으로 분할합니다. 아래와 같이 키워드 fill이 추가되지 않는 한 투명(예: 이미지 채우기 없음):
fill 키워드 외에도 border-image-slice 속성은 1~4개의 매개변수 값을 허용할 수 있습니다.
1. 4개의 매개변수 값이 모두 제공되면 이미지가 상, 우, 하, 좌의 순서로 분할됩니다.
2. 3개의 매개변수가 제공되면 첫 번째 매개변수는 상단에 사용되고 두 번째 매개변수는 왼쪽 및 오른쪽 측면에 사용되며 세 번째 매개변수는 하단에 사용됩니다.
3. 두 개의 매개변수가 제공되는 경우 첫 번째 매개변수는 상하, 두 번째 매개변수는 왼쪽 및 오른쪽에 사용됩니다.
4. 매개변수가 하나만 제공되면 이 값을 사용하여 위쪽, 오른쪽, 아래쪽, 왼쪽이 구분됩니다.
[예시] border-image-source 속성을 통해 로드된 이미지를 분할하려면 border-image-slice 속성을 사용하세요.
<!DOCTYPEhtml><html><head><style>div{width:200px;border:27pxsolid;padding:10px;border-image-source:url(./img.png);border-image-slice:27; }</style></head><body><div>기본 테두리를 이미지로 바꾸기</div></body></html>실행 결과:
3. 테두리 이미지 너비
border-image-width 속성은 border-image-source 속성을 통해 로드되는 이미지의 두께(너비)를 설정하는 데 사용됩니다. 속성의 구문 형식은 다음과 같습니다.
테두리 이미지 너비: [<길이>|<백분율>|<숫자>|자동]{1,4}구문은 다음과 같이 설명됩니다.
1. <길이>: 숫자값과 단위를 사용하여 이미지 테두리의 너비를 지정합니다.
2. <백분율>: 이미지 테두리의 너비를 백분율 형식으로 지정하고, 이미지 테두리 영역의 너비와 높이를 참조하여 변환합니다.
3. <number>: 부동 소수점 숫자를 사용하여 이미지 테두리의 너비를 지정합니다. 이 값은 border-width의 배수에 해당합니다. 예를 들어 값이 2인 경우 매개변수의 실제 값은 2 * border입니다. - 너비. 음수 값은 허용되지 않습니다.
4. auto: 브라우저에 의해 자동으로 설정됩니다. border-image-width가 auto로 설정된 경우 실제 값은 border-image-slice와 동일합니다.
팁: border-image-width 속성의 기본값은 1입니다. 즉, border-image-width 속성 값을 생략하면 이 속성 값이 1 * border-width로 설정됩니다. -width 값을 직접 사용하는 것과 동일합니다.
border-image-width 속성에는 1~4개의 매개변수 값도 허용됩니다.
1. 4개의 매개변수 값이 모두 제공되면 4방향의 이미지 테두리 너비가 상, 우, 하, 좌의 순서로 설정됩니다.
2. 세 개의 매개변수가 제공되면 첫 번째 매개변수는 위쪽 테두리에 사용되고, 두 번째 매개변수는 왼쪽 및 오른쪽 테두리에 사용되고, 세 번째 매개변수는 아래쪽 테두리에 사용됩니다.
3. 두 개의 매개변수가 제공되는 경우 첫 번째 매개변수는 위쪽 및 아래쪽 테두리에 사용되고 두 번째 매개변수는 왼쪽 및 오른쪽 테두리에 사용됩니다.
4. 매개변수가 하나만 제공되는 경우 위쪽, 오른쪽, 아래쪽, 왼쪽 값을 사용하여 이미지 테두리의 너비를 설정합니다.
[예제] border-image-width 속성을 사용하여 이미지 테두리 너비를 설정합니다.
<!DOCTYPEhtml><html><head><style>div{width:200px;border:27pxsolid;padding:10px;border-image-source:url(./img.png );border-image-slice:27;border-image-width:10px10.515px;}</style></head><body><div>기본 테두리를 이미지로 바꾸기</div></body> </html>실행 결과:
4. 테두리 이미지 시작
border-image-outset 속성은 테두리 경계를 기준으로 이미지 테두리의 바깥쪽 오프셋 거리를 정의하는 데 사용됩니다(이미지 테두리가 상자 모델을 넘어 확장되도록). 이 속성의 구문 형식은 다음과 같습니다.
테두리 이미지 아웃셋:[<길이>|<번호>]{1,4}구문은 다음과 같이 설명됩니다.
1. <길이>: 특정 값과 단위의 형태로 이미지 테두리의 바깥쪽 오프셋 거리를 지정합니다. 음수 값은 허용되지 않습니다.
2. <숫자>: 부동 소수점 숫자를 사용하여 이미지 테두리의 바깥쪽 오프셋 거리를 지정합니다. 이 값은 테두리 너비의 배수를 나타냅니다. 예를 들어 값은 2입니다. 이는 오프셋이 2 * 테두리 너비임을 의미합니다. . 음수 값은 허용되지 않습니다.
1. border-image-outset 속성은 1~4개의 매개변수 값도 허용할 수 있습니다.
2. 4개의 매개변수 값이 모두 제공되면 4개의 변이 상, 우, 하, 좌 순으로 적용됩니다.
3. 세 개의 매개변수 값이 제공되면 첫 번째 매개변수는 위쪽 테두리에 사용되고 두 번째 매개변수는 왼쪽 및 오른쪽 테두리에 사용되고 세 번째 매개변수는 아래쪽 테두리에 사용됩니다.
4. 두 개의 매개변수가 제공되면 첫 번째 매개변수는 위쪽 및 아래쪽 테두리에 사용되고 두 번째 매개변수는 왼쪽 및 오른쪽 테두리에 사용됩니다.
5. 매개변수가 하나만 제공되면 해당 매개변수가 4개 측면에 동시에 적용됩니다.
[예] border-image-outset 속성을 사용하여 테두리 경계를 기준으로 이미지 테두리의 바깥쪽 오프셋을 설정합니다.
5. 테두리 이미지 반복
border-image-repeat 속성은 border-image-slice 속성으로 구분된 이미지 테두리를 타일링, 늘이기 등 어떻게 채우는지 설정하는 데 사용됩니다. 이 속성의 구문 형식은 다음과 같습니다.
테두리-이미지-반복:[늘이기|반복|둥근|공간]{1,2}구문은 다음과 같이 설명됩니다.
1. 늘이기: 분할된 이미지를 늘려 테두리 영역을 채웁니다.
2. 반복: 분할된 이미지의 반복 타일링을 사용하여 테두리 영역을 채웁니다. 이미지가 테두리에 닿으면 초과 부분이 잘립니다.
3. round: 배경 이미지를 정수 횟수만큼 타일링할 수 없는 경우 상황에 따라 이미지 크기가 조정된다는 점을 제외하면 반복 키워드와 유사합니다.
4. space: 배경 이미지를 정수 횟수만큼 타일링할 수 없는 경우 이미지 주위에 빈 공간이 채워지는 점을 제외하면 반복 키워드와 유사합니다.
border-image-repeat 속성은 1~2개의 매개변수 값을 허용할 수 있습니다.
1. 두 개의 매개변수가 제공되는 경우 첫 번째 매개변수는 가로 방향에 사용되고 두 번째 매개변수는 세로 방향에 사용됩니다.
2. 매개변수가 하나만 제공되면 해당 값이 가로 및 세로 모두 적용됩니다.
[예] border-image-repeat 속성을 사용하여 이미지 테두리 채우기 방법을 설정합니다.
<!DOCTYPEhtml><html><head><style>div{width:200px;border:27pxsolid;padding:10px;border-image-source:url(./img.png);border-image-slice:27; border-image-repeat:roundrepeat;}</style></head><body><div>기본 테두리를 이미지로 바꾸기</div></body></html>실행 결과:
6. 테두리 이미지
border-image-source, border-image-slice, border-image-width, border-image-outset 및 border-image-repeat의 속성을 이해한 후 다시 돌아가 border-image 속성을 살펴보겠습니다. border-image 속성은 border-image-* 5가지 속성의 약자로, border-image 속성을 통해 5가지 border-image-* 속성을 동시에 설정할 수 있습니다.
[예] border-image 속성을 사용하여 이미지 테두리를 설정합니다.
