border-image-width 속성을 사용하는 방법

border-image-width 속성은 이미지 테두리의 너비를 지정하는 데 사용됩니다. 4가지 값을 설정하여 테두리 이미지 영역을 오프셋의 9개 부분으로 나눌 수 있습니다. 이는 위쪽, 오른쪽, 아래쪽, 왼쪽을 나타냅니다. 그리고 양측 안쪽 거리.

CSS3 border-image-width 속성

기능: 이미지 테두리의 너비를 지정합니다.

구문: ​​

border-image-width: number|%|auto;

number: 해당 테두리 너비의 배수를 나타냅니다.

%: 참조 프레임 이미지 영역의 크기 - 영역의 높이는 수평 오프셋에 영향을 미치고 너비는 수직 오프셋에 영향을 미칩니다.

auto: 이 속성이 지정되면 너비는 해당 이미지 조각의 고유 너비입니다.

설명: border-image-width 속성의 4개 값은 테두리 이미지를 9개 부분으로 나누는 오프셋을 지정합니다. 이는 영역의 위쪽, 오른쪽, 아래쪽 및 왼쪽에서 안쪽으로의 거리를 나타냅니다. 네 번째 값을 생략하면 두 번째 값과 동일합니다. 세 번째 값을 생략하면 첫 번째 값과 동일합니다. 두 번째 값을 생략하면 첫 번째 값과 동일합니다. 테두리 이미지 너비 값으로 음수 값은 허용되지 않습니다.

참고: Internet Explorer 10 및 이전 버전, Opera, Safari 5 및 이전 버전은 border-image-width 속성을 지원하지 않습니다.

CSS3 border-image-width 속성 사용 예

div
{
border-image-source: url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg);
border-image-width: 30 30;
}

위 내용은 border-image-width 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!